Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Issue with Next.js live preview mode causing content to disappear on page load

23 replies
Last updated: Jan 16, 2022
A completely unrelated question to my last one, but can anyone understand why my content is appearing in the preview and then promptly disappearing when the page finishes loading? Video here: https://www.dropbox.com/s/js2vxz0fpfnixjz/Screen%20Recording%202022-01-13%20at%2010.05.11.mov?dl=0
Jan 13, 2022, 10:07 AM
I assume it's when the preview kicks in, but I'm not sure why 😞
Jan 13, 2022, 10:09 AM
The site is using Next preview mode — I followed this guide but I'm happy to share my code
https://www.sanity.io/guides/nextjs-live-preview#e0a6b3b6629c
Jan 13, 2022, 10:10 AM
I can't say by the video but the fact it prints: 
page: null
might have something to do with it? I've not tried a complex page in preview mode yet, so hopefully it's not riddled with issues!
Jan 13, 2022, 10:32 AM
Yeah it's like the page data is loaded, then unloaded when the preview appears? You can see the the log shows the data load, but then shows null when the loading is complete
Jan 13, 2022, 10:53 AM
I guess it's this that's unloading the data:
  const {
    data: { page },
  } = usePreviewSubscription(pageQuery, {
    params: { slug },
    initialData: data,
    enabled: preview && slug,
  });
Jan 13, 2022, 11:00 AM
I can see that 
{ page }
does exist within 
data
though...
Jan 13, 2022, 11:02 AM
Just posting here as I test things out... changing 
enabled
above to 
false
allows the page to load, but then of course the live preview doesn't work. So I've at least found the cause of the issue, but not yet sure what will fix it
Jan 13, 2022, 11:10 AM
Totally appreciate it's the weekend, but if anyone has any ideas here ... I'm a bit up shit creek with it 😐
Jan 15, 2022, 10:32 AM
It looks like you're using a subquery i.e
{
  "globalMetaData": *[_type == "config"][0],
  "menuItem": *[_type == "config"][0],
  /* etc */
}
If so, AFAIK it doesn't work with 
createPreviewSubscriptionHook
. I ran into this same issue last year https://github.com/sanity-io/next-sanity/issues/4
Jan 15, 2022, 2:47 PM
I ended up fetching the global data separately & only fetch the page data in preview mode
Jan 15, 2022, 2:50 PM
There's a new beta available for next-sanity but I haven't checked if it solves this issue: https://sanity-io-land.slack.com/archives/CB4MVT2AE/p1639747394005000
Jan 15, 2022, 2:52 PM
Thanks
user G
— I've tried a couple of things from your suggestions... updated to the beta, and also took a look at how I'm using subqueries. I suspect my code may have changed since the last time I shared it so I can't actually see if I'm still using subqueries... as far as I can tell I'm not
Jan 16, 2022, 9:36 AM
Can you see any problems here? This is driving me nuts :lolsob: and the client is putting the screws in saying they need it by today hahahah

https://github.com/Modular-Everything/nrg/tree/main/web
Jan 16, 2022, 9:37 AM
Jan 16, 2022, 9:38 AM
I've just looked... I think in this line 

 
 ​  ​const​ ​{​ ​data​: ​page​ ​}​ ​=​ ​usePreviewSubscription​(​pageQuery​,​ ​{
Should it just be

const page = usePreview...
Instead? Since 
pageQuery
only return page data
Jan 16, 2022, 9:56 AM
I've just looked... I think in this line 

 
 ​  ​const​ ​{​ ​data​: ​page​ ​}​ ​=​ ​usePreviewSubscription​(​pageQuery​,​ ​{
Should it just be

const page = usePreview...
Instead? Since 
pageQuery
only return page data
Jan 16, 2022, 9:56 AM
And your initial data should just be 
data.page
Jan 16, 2022, 9:57 AM
Thanks Derek... so I tried this, makes a lot of sense! Unfortunately I'm still getting the same result
Jan 16, 2022, 10:03 AM
I tried logging the output of 
page
and get this:
Jan 16, 2022, 10:03 AM
The data loads, then unloads
Jan 16, 2022, 10:03 AM
Ah my bad, usePreview actually doesnt return the data directly 😅 I'll check again when I get on a laptop
Jan 16, 2022, 10:08 AM
We resolved this in DM, the culprit is a wrongly named query params 🎉
Jan 16, 2022, 10:46 AM
Derek has once again bailed me out of a tight spot. The problem with the above code (full credit for the fix goes to Derek) was I was using 
slug
where I should have been using 
page
:

  const slug = data?.page?.slug;
  const { data: page } = usePreviewSubscription(pageQuery, {
    params: { page: slug }, // previously this was just 'slug'
    initialData: data.page,
    enabled: preview && slug,
    useGroqBeta: true,
  });
and just like that it works
🙂 thank you
user G
Jan 16, 2022, 10:46 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?