Gatsby Preview not redirecting to path

Developing with Prismic
1

Dear Prismic team,

I have followed the instructions to setup previews with Gatsby Cloud twice and I still cannot get previews to work. I am getting no errors and my browser gets stuck displaying "Loading" which is the return value of preview.js page on the guides.

Troubleshooting notes #1:

  • I confirmed that my releaseID is setup correctly and it is currently working locally (by setting releaseID in gatsby-config.js)
  • The app reaches pages/preview.js but withPreviewResolver() is not triggering a navigation callback to the proper page
  • 404.tsx page, which is using withUnpublishedPreview, it's never being loaded. So, the app gets stack in pages/preview.js
  • I'm using the latest version of Gatsby. I just setup my projects on Monday this week

Troubleshooting notes #2:

  • I started testing with the manual setup to try to get closer to the cause of the issue. I found out the following:

In preview.js on the following line: const { isPreview, previewData, path } = usePrismicPreview({ ... })

returns the following:

isPreview = true
previewData = <Correct object with all the necessary date for preview>
path = undefined

Why is path = undefined. It seems that the problem is related to this.

Thank you very much for your help.

Santiago

2

Hi @development (great username! haha),

It looks like there may be some confusion between Gatsby Cloud Previews and client-side previews via gatsby-source-prismic. Based on your notes, it looks like you're implementing client-side previews, not Gatsby Cloud Previews.

  • Gatsby Cloud Previews: Use Gatsby Cloud's Preview service to have a running server that you access via your Gatsby Cloud account.
  • Client-side Previews: Your static website contains all preview-related code and works directly with Prismic, separately from Gatsby Cloud.

It's possible the src/pages/preview.js file with the withPreviewResolver higher order component is not set up correctly. Based your notes where path returns undefined, my guess is that your linkResolver function is not being passed correctly.

Could you share your src/pages/preview.js and Link Resolver file here? If it contains private information, you can send me a direct message.

Thanks!

1 Like
4

HI @angeloashmore,

The username is just the shared account of the company, haha. I think the problem is that I did not create a link resolver file. Do I need to create a link resolver function and add custom logic of which data types map to which navigation page there?

Thanks,
Santiago

5

Hey Santiago,

Yes, a Link Resolver function is necessary.

In case you're unfamiliar with what a Link Resolver is, it basically converts a document from your repository into a URL on your site. This is used for making links in your content, but also for determining where previews should be shown from.

More details on how to create a Link Resolver can be found in our Gatsby documentation here: Link Resolving with Gatsby - Prismic

Updating your preview resolver page

On your preview resolver page (src/pages/preview.js), you'll need to provide your Link Resolver like this:

// src/pages/preview.js

import linkResolver from '../linkResolver'

// Your component here...

export default withPreviewResolver(PreviewPage, {
  repositoryName: process.env.GATSBY_PRISMIC_REPOSITORY_NAME,
  linkResolver,
})

This snippet is using the withPreviewResolver higher order component, which I would recommend over doing things manually with usePrismicPreview.

Updating your gatsby-config.js

This step is optional since you haven't been using a Link Resolver, but I would recommend it. You can provide the Link Resolver you created to the plugin to automatically generate URLs throughout your content.

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-prismic',
      options: {
        // Alongside your other options...
        linkResolver: require('./src/linkResolver')
      }
    }
  ]
}

I hope that helps! Let me know if you run into issues with this and we can debug it further.

6

Thanks for the help @angeloashmore! This is what I was missing.

7

Great, you're welcome! Glad to hear it's working.

10

I've been troubleshooting a seemingly similar issue for the last few hours. However, the problem turned out to not be anything to do with code, but the previews weren't working because Chrome was blocking the cookies by default.

Might be worth adding some info in your docs about it (sorry if it's there already but I didn't see it)

11

Hi Noah,

Welcome to the community! :smile:

This is indeed something that's discussed in our Preview Troubleshooting document. No worries.

Thanks.

13

Hi Noah (@cpo),

Quick question: Do you know if it was due to an ad blocker? Previews depend on loading the Prismic toolbar and saving/accessing cookies so I want to make sure we're letting users know workarounds if this happens.

Thank you!

16

Hi,

no ad blockers or anything no. Just the later versions of Chrome are blocking 3rd party cookies by default (maybe I've got some DNT setting somewhere but I don't think it's unusual). Had to enable them where I was using previews.

Chris

17

Understood. Thank you!