Gatsby preview URL / path not correct using gatsby-source-prismic-graphql

Developing with Prismic
1

I am having problems with the preview functionality - the preview token does not resolve to the correct preview path on certain content types.

Expected Result
Clicking preview will pass the preview token and redirect to the preview path as specified in gatsby-config.js for gatsby-source-prismic-graphql in options.pages

eg. Previewing a Contact_page content type with uid=contact with will result in the preview URL http://localhost:8000/preview/contact_page/?uid=contact

Actual Result
The preview URL is http://localhost:8000/preview/content_page/?uid=contact and as such displays a blank screen (with the Prismic preview widget visible)

When I manually change the URL to the expected result ie. contact_page then my preview is visible.

Intersetingly, another page configuration with content type post is previewing correctly with the correct preview path http://localhost:8000/preview/post/?uid=my-first-post

So it seems that there is something going wrong with the preview mapping to the specified preview URLs being passed from the token.

My gatsby-source-prismic-graphql config is below:

{
  resolve: 'gatsby-source-prismic-graphql',
  options: {
    repositoryName: 'xxxxx',
    defaultLang: 'en-au',
    path: '/preview',
    previews: true,
    pages: [
      {
        type: 'Content_page',
        match: '/:uid',
        previewPath: '/preview/content_page',
        component: require.resolve('./src/templates/page.tsx')
      },
      {
        type: 'Post',
        match: '/blog/:uid',
        previewPath: '/preview/post',
        component: require.resolve('./src/templates/post.tsx')
      },
      {
        type: 'Blog_page',
        match: '/:uid',
        previewPath: '/preview/blog_page',
        component: require.resolve('./src/templates/blog.tsx')
      },
      {
        type: 'Contact_page',
        match: '/:uid',
        previewPath: '/preview/contact_page',
        component: require.resolve('./src/templates/contact.tsx')
      }
    ]
  }
}

Note that I have tried both path and previewPath from different reference documentation in the above config with no difference in results.

This is extremely frustrating as the preview functionality is a key requirement for my client, and at this stage they can not use it.

Any ideas or assistance from the community or the Prismic team would be much appreciated.

3

Hi Adrian,

Thank you for posting in Prismic community, I will try to debug this with you.
Are you using the link resolver? if so can you please share with us a code snippet of it.

Looking forward to your reply,
Fares

4

Hi Fares,

Yes I am using the linkResolver - pls see it pasted below:

export const linkResolver = (doc: Doc) => {
  switch (doc.type) {
    case 'post':
      return `/blog/${doc.uid}/`

    case 'content_page':
    case 'contact_page':
    case 'blog_page':
      return `/${doc.uid}/`

    default:
      return '/'
  }
  // Homepage route fallback
  return '/'
}

I have this registered in my gatsby-browser.js as well:

// Register link resolver
registerLinkResolver(linkResolver)

It seems the preview urls work fine for multiple custom types, but do not resolve correctly for singleton content types.

So Post and Content_page previews are working, however Blog_page and Contact_page are not working.

Any assistance is much appreciated.

8

Hi Adrian,

For me it seems that the issue come from the fact that you need to add the path of the contact page in the linkResolver the same as the blog page type such as:

case 'content_page':
    return `/content_page/${doc.uid}/`

Fares

9

Thanks Fares,

The link resolver works correctly as is - the links resolve to their relevant paths.

eg. for contact_page the correct url should be domain.com/contact

If I add the entry as you suggested, then navigating to the contact page will not resolve correctly. http://localhost:8000/contact_page/contact/ which returns a blank page.

So the problem is only when previewing, not actually when browsing. And it occurs only for singleton custom content types as already mentioned.

Any ideas?

10

Hi @Fares , Just bumping this thread to see if you have any possible solutions to this issue?
Thanks,
Adrian

11

Hi,

We're having the same issue. Previews works locally, and on published content when adding trailing slash to /preview/, but not for unpublished content. Is there any solution to this? It's kind of a big limitation for working with Prismic in AWS.

Thanks,
Pontus

12

I'm using gatsby-source-priscmic (not gatsby-source-prismic-graphql) and I just got this working for anyone interested. The solution was to first add trailing slashes to /preview/ to get it working with published content. And then to add a redirect rule in AWS Amplify for pages that does not exist so that it redirects to the 404.html page where the "withUnpublishedPreview" HOC is used. The rule in AWS looks like this:

source: /<*>
target: /404.html
type: 404 rewrite

And the code in /pages/404.js is the same as in the docs.

1 Like
13

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.