Live preview with globals not showing up

default discord avatar
.wsz
last month
11

Hello



I'm trying to set up live preview on a global page but it's blank and doesn't log any errors except


unreachable code after return statement

in the browser console



It works nicely on collections



Any idea what I'm doing wrong?



Thanks



Is anyone else having issues with live preview on globals?

  • default discord avatar
    chris_heinz
    last month

    This was fixed in the latest version of payload v2.0.13. But I am still not able to edit the fields in global live preview they are all readonly/disabled. Is this the case for you as well?

  • default discord avatar
    .wsz
    4 weeks ago

    @chris_heinz yes same issue on 2.0.13 fixed with 2.0.14



    i do have another issue now where the live preview does not update when changing the fields


    only rerenders on page refresh



    https://discord.com/channels/967097582721572934/1169253682924240907
  • default discord avatar
    Zephury
    4 weeks ago

    maybe you guys want to share your collection

    admin.livePreview

    and your

    useLivePreview

    (if using react) code?



    I've had it working for globals in 13 for sure


    there are numerous other issues, but I

    do

    get the data and can edit it.

  • default discord avatar
    .wsz
    4 weeks ago

    my last issue was caused to

    @payloadcms/live-preview-react

    on the front end which was outdated, updating to

    0.1.5

    fixed it



    The global field issue was confirmed on

    .13

    so it's odd you actually got it working



    https://github.com/payloadcms/payload/issues/3846

    here is the related repo


    https://github.com/wSzki/payload_livepreview_bug/blob/main/src/globals/TestPage.tsx

    anyway everything is working nicely so far, thanks !

  • default discord avatar
    Zephury
    4 weeks ago

    I have it setup kind of weird with multiple instances of useLivePreview, perhaps I did something wrong 不



    I started a new project with the website template and added live-preview-react to it; using the

    same

    code from my previous project where I had live-preview working fine with payload hosted separately.



    it does behave quite differently in this scenario now. I get runtime errors, just for using

    useLivePreview

    . Not even when I'm using live-preview. fun

  • default discord avatar
    .wsz
    4 weeks ago

    is global live preview still working for you?


    a snippet on how you use it would be much appreciated



    I've only found examples with collections, but I can't actually make it work on globals which seems to always want to render

    /

    instead of the correct route in the payload UI.



    useLivePreview returns the expected

    {data}

    tho

  • default discord avatar
    Zephury
    4 weeks ago

    I kind of thought something like this would work...


    In console.log, all the values are correct. live preview updates my global state and everything, but no visual changes occur within the iframe.



    const PageClientTemplate = ({ page }: { page: Page }) => {
      const { globals, setGlobals } = useGlobalsContext()
      const { data } = useLivePreview({
        serverURL: process.env.NEXT_PUBLIC_SERVER_URL,
        depth: 2,
        initialData: {
          page,
          companyInfo: globals?.companyInfo || {},
          header: globals?.header || {},
          footer: globals?.footer || {},
        },
      })
    
      console.log(data)
    
      useEffect(() => {
        console.log('useEffect fired')
        setGlobals({
          companyInfo: data?.companyInfo as CompanyInfo,
          header: data?.header as Header,
          footer: data?.footer as Footer,
        })
      }, [data])
    
      return (
        <>
          <Hero hero={data?.page?.hero} breadcrumbs={data?.page?.breadcrumbs as Breadcrumb[]} />
          <RenderBlocks blocks={data?.page?.blocks} />
        </>
      )
    }


    What does

    fully

    work, but is quite ugly, is this... However, with monorepo, I get those runtime errors I mentioned. The same exact code with the same payload version and live-preview-react plugin works without any issues when payload is hosted separately from next.



    page.client.tsx (use client)


    const PageClientTemplate = ({ page }: { page: Page }) => {
      const { data } = useLivePreview({
        serverURL: process.env.NEXT_PUBLIC_SERVER_URL,
        depth: 2,
        initialData: page,
      })
    
      return (
        <>
          <Hero hero={data?.hero} breadcrumbs={data?.breadcrumbs as Breadcrumb[]} />
          <RenderBlocks blocks={data?.blocks} />
        </>
      )
    }


    inside of my

    app/layout.tsx

    , I fetch each of my globals with a promise.all on the server, then pass a big "globals" object to this context provided, within my

    layout.tsx

    , I have this:



    const GlobalsContext = createContext<Globals>(null)
    
    export const useGlobalsContext = () => {
      return useContext(GlobalsContext)
    }
    
    export const GlobalsProvider = ({
      children,
      globals,
    }: {
      children: ReactNode
      globals: Globals
    }) => {
      const { data: companyInfo } = useLivePreview({
        serverURL: process.env.NEXT_PUBLIC_SERVER_URL,
        depth: 2,
        initialData: globals.companyInfo,
      })
    
      const { data: header } = useLivePreview({
        serverURL: process.env.NEXT_PUBLIC_SERVER_URL,
        depth: 2,
        initialData: globals.header,
      })
    
      const { data: footer } = useLivePreview({
        serverURL: process.env.NEXT_PUBLIC_SERVER_URL,
        depth: 2,
        initialData: globals.footer,
      })
    
      const data = useMemo(() => {
        return {
          companyInfo,
          header,
          footer,
        }
      }, [companyInfo, header, footer])
    
      return <GlobalsContext.Provider value={{ ...data }}>{children}</GlobalsContext.Provider>
    }


    so yeah... its

    probably

    not supposed to be done this way, but it does work 不

  • default discord avatar
    .wsz
    4 weeks ago

    awesome thanks ! so if i'm understanding correclty live preview only works when used in layout.tsx or page.client.tsx at the root level? (

    /app/*

    )

  • default discord avatar
    Zephury
    4 weeks ago

    well;



    the initial can come from the server. especially if you're caching pages, I think this is how most people are doing it, unless they have something really dynamic. Usually initial data from the server is within your page.tsx file(s), or your layout.tsx file(s).



    useLivePreview

    must be called within a

    use client

    component, as it works exclusively on the frontend.



    It's like a middleware of sorts that hooks in to the

    real

    , current data that your site receives, however it receives it and essentially replaces that data as you use live-preview in payload.



    I don't know entirely how it works, I'm still waiting for answers on how we're

    supposed

    to setup globals and live previews. When I merge data, it doesn't work for whatever reason. I can give it good initialData containing all of my globals and pages, as you saw in my first example, which doesn't work.



    The only thing that is working for me is to just make a separate useLivePreview for every document using it; it feels quite strange to me having 3 useLivePreviews on the same page and I can't imagine how big it'll get with another project I'll be working on soon 不

  • default discord avatar
    .wsz
    4 weeks ago

    gotcha tyvm for the clarifications

  • default discord avatar
    chris_heinz
    4 weeks ago

    Yeah I can confirm this I solved it exactly like that with three different useLivePreview hooks for navbar, page and footer data which felt also very wrong for me although it worked fine. Adding a useMemo is a good point because I struggeled with too many rerenders which felt bad for performance.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.