Live preview with globals not showing up

.wsz

last month

11

• 

  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?

• 

  .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
• 

  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.

• 

  .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 !

• 

  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

• 

  .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

• 

  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 🤣

• 

  .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/*

  )

• 

  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 🤣

• 

  .wsz

  4 weeks ago

  gotcha tyvm for the clarifications

• 

  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.