Skip to content
👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect
Get help on Slack

Query for Sanity preview mode in Next.js not returning draft posts

14 replies
Last updated: May 31, 2023
Hello everyone – hoping someone might be able to help me.
I've recently setup Sanity preview mode with Next.js 13 (app directory). The query I'm using the fetch my post in preview mode looks like this:


*[_type == "post" && slug.current == $slug][0]{ ..., authors[]->, categories[]->]
This however, doesn't bring back any posts that are in draft mode, only posts that are published are returned, which seems to defeat the purpose. I couldn't find anything in the docs that explains how to include draft posts in the response, so I'm wondering if I'm going about this in the right way. Should it be the case, instead, that posts have a field called, say 'publishedAt', which is used to filter out posts on the main site that haven't yet been published?

Any pointers would be greatly appreciated.
May 30, 2023, 9:23 AM
are you trying to preview within the Sanity studio? if not, you need to make authenticated API requests:
Drafts are, by default, non-public and only visible to authenticated requests with the right permissions. This means that to preview drafts outside of the Studio context; you will have to make authenticated requests to the Sanity API to fetch the draft document. As a consequence, you need to make sure that you can access the draft document from your front end.
https://www.sanity.io/docs/preview-content-on-site
May 30, 2023, 4:58 PM
user V
thank you for this!
May 31, 2023, 7:18 AM
Yes, that is correct – I'm trying to preview within Sanity Studio, using the Iframe Pane plugin.
May 31, 2023, 7:20 AM
I'm using the 
definePreview
hook that's provided by 
next-sanity
to fetch the data (as per their guide), in the following way:
May 31, 2023, 7:21 AM
export const usePreview = definePreview({
  projectId: config.projectId,
  dataset: config.dataset,
  onPublicAccessOnly,
});
May 31, 2023, 7:21 AM
export const PreviewPost = ({ slug }: { slug: string }) => {
  const data = usePreview(null, getPostBySlugQuery, {
    slug,
  });

  return (
    <>
      <Post post={data} />
      <Link
        className="fixed bottom-0 right-0 w-full p-6 font-bold text-white bg-blue-500"
        href={getRoute({ path: pathNames.API_POST_DRAFT_EXIT })}
      >
        Exit Preview
      </Link>
    </>
  );
};
May 31, 2023, 7:21 AM
And this is the query I'm using (what is referenced above as 
getPostBySlugQuery
)
May 31, 2023, 7:22 AM
export const getPostBySlugQuery = groq`*[_type == "post" && slug.current == $slug][0]{ ..., authors[]->, categories[]->]`
May 31, 2023, 7:22 AM
From what I gather, the authentication piece is taken care of by this library:
May 31, 2023, 7:26 AM
So I guess based on the above, I would expect draft posts to be returned, if the only condition for them being returned is that the user needs to be authenticated.
May 31, 2023, 7:27 AM
However, the article you shared also mentions the following:
May 31, 2023, 7:27 AM
So I'm wondering if I need to modify my query to look like the third bullet point – I'm going to try that out now to see if that works, will report back, but also curious to hear your thoughts as to whether this is the right approach. Thank you in advance!
May 31, 2023, 7:29 AM
user V
– actually, I've been digging around, and I think you're right – the issue is that I'm not setting an authentication cookie at any point, so when the request is made from the frontend, it fails (as you'd expect).
May 31, 2023, 9:30 AM
Thanks for your help, I'm going to keep playing around it and see if I can get it working.
May 31, 2023, 9:31 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?