How do you properly configure gatsby-source-prismic-graphql preview functionality?

Question

I'm using the gatsby-source-prismic-graphql plugin, and I'm trying to properlly configure it's Prismic preview functionality.

Expected functionality
From Prismic CMS' editor on an already published document, I make a change, save, and I click the eyeball preview button. I want to be redirected to my local Gatsby + Prismic instance, redirected to the desired page, and see the change I made.

What's actually happening
I make the change on Prismic CMS, click preview, and am redirected to localhost:8000/ and not the desired page I'd like to preview.

Following Prismic's troubleshooting article section on "Can you see the preview cookie in the browser?" I am able to see the preview changes I made, indicating that "the problem is in the code."

Is my linkResolver.js or gatsby-config.js not properly configured?

src/utils/linkResolver.js

exports.linkResolver = function linkResolver(doc) {

  // Route for customers page
  if (doc.type === 'Customers') {
    return "/" + doc.uid;
  }

  // Homepage route fallback
  return '/'
}

Relevant section of gatsby-config.js

    {
      resolve: 'gatsby-source-prismic-graphql',
      options: {
        repositoryName: 'my-repo', // (REQUIRED, replace with your own)
        accessToken: `${process.env.API_KEY}`, // (optional API access token)
        path: '/preview', // (optional preview path. Default: /preview)
        previews: true, // (optional, activated Previews. Default: false)
        pages: [
          { // (optional, builds pages dynamically)
            type: 'Customers',         // TypeName from prismic
            match: '/customers',  // Pages will be generated under this pattern
            path: '/customers-preview', // Placeholder route for previews
            component: require.resolve('./src/templates/customers.js'),
          },
        ],
      }
    }

Prismic Preview Settings
Here's a picture of my Prismic preview settings.
Domain: localhost:8000
Link Resolver: /preview

score 0 · Answer 1 · answered Jun 04 '20 at 14:10

Can you post here the code where you are passing the linkResolver, it is possible that 'doc.type' is returning an undefined, because in graphQL you need to pass the _meta which includes the UID of your page.

You can also check this document of how to configure linkResolver.

so if your code is like this:

   <a href={Link.url(document.generic_link, linkResolver)}>Go to page</a>

And your GraphQL query is like this

    generic_link {
      ... on PRISMIC_Linked_page {
        _linkType
        _meta {
          uid
        }
      }
    }

Then your linkResolver should be like this:

linkResolver(doc) {
  if (doc.type === 'page') {
    return `/${doc._meta.uid}`
  }
  return '/'
}

How do you properly configure gatsby-source-prismic-graphql preview functionality?

1 Answers1