[Live preview] Relationship fields and images returning `null`

tinouti11 months ago

3

const { data } = useLivePreview<CmsArticle|null>({
  initialData: null,
  serverURL: "http://localhost:3000",
  depth: 10, // removing/changing this does not change anything
});
console.log(data);

• 

  leerechan11 months ago

  I have a similar issue. I encountered it while using useLivePreview, and it's unclear whether it's a bug or my mistake. I display an image in one place, but after using the useLivePreview hook, the object representing the image is replaced with a string ID of the image. In the screenshot, you can see that the first render of the page have consistent image data, both from GraphQL and the hook's data. Then, the information about the image from the useLivePreview hook becomes a string with an ID. My assumption is that after the page preview renders, preview iframe receives messages from the form where, for some reason, the image is not stored as a complete object. Changing the depth parameter doesn't help too.

  
  
  console.log(initialPage.contact.contactInfos.image[0].image) const { data } = useLivePreview<Station>({ initialData: initialPage, serverURL: 'http://localhost:3000', }) console.log(data.contact.contactInfos.image[0].image)

  
• 

  tinouti11 months ago

  Hmm interesting, so you are at least getting the data.

  
  

  I wonder if, in my case, this is to do with me setting the

  initialData

  to null. 🤔

  
  
  

  In your case, it does indeed very much look like a depth issue, but if the

  depth

  parameter does not change anything... 🤷‍♂️

  
  
  

  Looks like it might be time to take a look under the hood and see how this thing is made! 😄

  
  

  
  

  Ah, looks like a known issue actually:

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

  
  

  Hmmm actually, I'm somehow just now noticing CORS errors, which might be related...

  
  

  🤔

  
  

  
  

  Oooh now that I've fixed the CORS problem, it seems that it might be an issue with the live preview system making API calls to get the relationship data, and not being able to due to authentication.

  
  

  
  

  Welp, adding my domain to the

  csrf

  setting in my payload config did the trick. 🙌

  
  

  
  

  So tldr for folks that might stumble upon the same issue of getting

  null

  in place of your relationship fields data, make sure your front-end is allowed to make requests to Payload using the

  cors

  and

  csrf

  options in the Payload config. ✅

  
  
  

  eg:

  
  

  {
    cors: [ 'http://localhost:3001' ],
    csrf: [ 'http://localhost:3001' ],
  }

  

  

  
• 

  eustachi011 months ago

  I'm having similar issues.