Fetch correct data in getStaticProps in preview mode

Developing with Prismic
3

Hi Hugo,

Welcome to the community! I'll be happy to help.

The first thing I would say is there is no need to set the ref to master ref as this is done automatically for you. Also, even though you said it's temporary, there's no need to pass the linkresolver configuration to the function as you've done here.

In your getStaticProps query, you don't need to do anything special for previews as you have done here, everything should be handle for you the code in the api/preview.js which you showed above. Also, I'm not sure where you're doing the query you've shown here but you would be able to do a getByUID query and hope that it works alongside a 'get all posts' query as you've done above.

So, let's say you've done a query on a dynamic [uid].js page for one post, then you should configure your page like so:

export async function getStaticProps({ params, locale, previewData }) {
  const ref = previewData ? previewData.ref : null
  const global = (await client.getSingle('global_layout', ref ? { ref, lang: locale } : { lang: locale })) || {}
  const post = (await client.getByUID('blog_post', params.uid, ref ? { ref, lang: locale } : { lang: locale })) || {}
  return {
    props: {
      preview: ref,
      global,
      post
    }
  }
}

export async function getStaticPaths() {
  const documents = await queryRepeatableDocuments((doc) => doc.type === 'blog_post')
  return {
    paths: documents.map(doc => `/blog/${doc.uid}`),
    fallback: true,
  }
}

As we do in our blog example. You set the preview data as empty for a normal query, then the api/preview route code enables preview mode and loads the data in this empty object for you. So make sure when you set this preview route correctly in your Prismic repo.

I release now the preview document could be clearer and I will work on that. We are also working on making previews easier to implement for Next.js.

Thanks.