👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Real-time preview not working for unpublished drafts in Next.js with Sanity

24 replies
Last updated: Mar 21, 2023
Hi I’m using
next-sanity
real-time preview and it’s working fabulously (thank you!) Unfortunately it’s only working on published drafts, is there a way to authenticate the sanity client to include drafts when running
client.fetch
?
Mar 20, 2023, 8:32 PM
There are two methods you can use for authentication. One thing to note is that if you want to use built in Sanity auth, you’ll need to host the Studio and the site on the same domain
Mar 20, 2023, 8:40 PM
perfect, it sounds like built-in auth will work for my use case
Mar 20, 2023, 8:41 PM
It seems like even with my authenticated client no drafts are being returned
Mar 20, 2023, 8:49 PM
const token = process.env.SANITY_API_READ_TOKEN;
    if (!token) {
      throw new Error(
        'A secret is provided but there is no `SANITY_API_READ_TOKEN` environment variable setup.'
      );
    }
    const client = _client.withConfig({ useCdn: false, token });
    const route = await client.fetch(
      groq`*[slug.current == $slug][0]{ "slug": slug.current, "type": _type }`,
      { slug: req.query.slug }
    );

    // If the slug doesn't exist prevent preview mode from being enabled
    if (!route) {
      return res.status(401).send('Invalid slug');
    }
Mar 20, 2023, 8:50 PM
this is my call to check and see if the route exists but i’m not sure if i need to add something to the query to ensure drafts are returned
Mar 20, 2023, 8:51 PM
No, if you’re making an authenticated request it should automatically give you drafts. Are you getting the published version of documents or nothing?
Mar 20, 2023, 9:01 PM
nothing, but i’m specifically testing with unpublished documents right now
Mar 20, 2023, 9:02 PM
if they have a slug they should return from the query, right?
Mar 20, 2023, 9:02 PM
Sure should! Are you sure that your token is getting picked up?
Mar 20, 2023, 9:06 PM
let me double check that, ty!
Mar 20, 2023, 9:12 PM
the token is correctly set — strangely enough previously published documents are updated in real time, the drafts are reflected on my frontend, though documents that have never been published are returning 404 when i go to preview them
Mar 20, 2023, 9:33 PM
What does the code for the page you’re rendering look like?
Mar 20, 2023, 9:35 PM
Mainly, where you’re fetching the data.
Mar 20, 2023, 9:35 PM
i’m not making it through the
/api/preview
redirect, getting caught up at the following line

if (!route) {
      return res.status(401).send('Invalid slug');
    }
Mar 20, 2023, 10:00 PM
Is the slug that you’re passing in to the query’s params defined/what you you would expect it to be?
Mar 20, 2023, 10:04 PM
it is yes. a little more context — i’m working off of a slightly modified version of
/api/preview
from the nextjs-blog-cms-sanity-v3 repo.
Mar 20, 2023, 10:08 PM
i’ve fixed the issue that was getting me caught up at the
Invalid Slug
message, so now I’m being redirected to the correct frontend url, but still returning a 404 page
Mar 20, 2023, 10:08 PM
ok starting to think this might be an issue happening where the data is being fetched in the Preview component
Mar 20, 2023, 10:10 PM
😮‍💨
Mar 20, 2023, 10:14 PM
i had a 404 fallback set up ahead of the Preview logic
Mar 20, 2023, 10:14 PM
that sorted it out 🙂
Mar 20, 2023, 10:14 PM
thank you
user M
!
Mar 20, 2023, 10:14 PM
the only thing that i’m confused about is why the query i’m running on
/api/preview
is returning null when the document has never been published
Mar 20, 2023, 10:20 PM
Glad you got it worked out!!
Mar 21, 2023, 4:24 PM

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.

Was this answer helpful?