Can't preview unpublished Custom Types with gatsby-plugin-prismic-previews

Developing with Prismic
,
1

I'm trying to preview an unpublished page but am just getting a 404 page. I've tried adding my customTypesApiToken to the gatsby-plugin-prismic-previews within gatsby-config.js, but I get the error Warning: there are unknown plugin options for "gatsby-plugin-prismic-previews": customTypesApiToken. Everything else looks correct, and published previews are working just fine. Relevant files are below, but let me know if I can provide anything else.

gatsby-browser.js & gatsby-ssr.js

import * as React from 'react';
import {
  PrismicPreviewProvider,
  componentResolverFromMap,
} from 'gatsby-plugin-prismic-previews';

import { linkResolver } from './src/utilities/link-resolver';
import PageTemplate from './src/pages';

export const wrapRootElement = ({ element }) => (
  <PrismicPreviewProvider
    repositoryConfigs={[
      {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        linkResolver,
        componentResolver: componentResolverFromMap({
          page: PageTemplate,
        }),
      },
    ]}
  >
    {element}
  </PrismicPreviewProvider>
);

404.js

import * as React from 'react';
import { withPrismicUnpublishedPreview } from 'gatsby-plugin-prismic-previews';

import Seo from '../components/Seo';

const NotFoundPage = ({ data }) => (
  <>
    <h1>404: Not Found</h1>
    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
  </>
);

export const Head = () => <Seo title="404: Not Found" />;

export default withPrismicUnpublishedPreview(NotFoundPage);

gatsby-config.js

require('dotenv').config({
  path: `.env`,
});

const routes = [
  {
    type: 'homepage',
    path: '/',
  },
  {
    type: 'stories',
    path: '/:uid',
  },
  {
    type: 'jobs',
    path: '/:uid',
  },
  {
    type: 'story',
    path: '/stories/:uid',
  },
  {
    type: 'basic_page',
    path: '/:uid',
  },
];

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: 'gatsby-source-prismic',
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        customTypesApiToken: process.env.PRISMIC_CUSTOM_TYPES_API_TOKEN,
        routes,
        linkResolver: require('./src/utilities/link-resolver').linkResolver,
      },
    },
    {
      resolve: 'gatsby-plugin-prismic-previews',
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        accessToken: process.env.PRISMIC_ACCESS_TOKEN,
        routes,
      },
    },
    {
      resolve: `gatsby-plugin-layout`,
      options: {
        component: require.resolve(`./src/components/Layout.js`),
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `bay-city-website`,
        short_name: `bay-city`,
        start_url: `/`,
        background_color: `#F6F5ED`,
        theme_color: `#F6F5ED`,
        theme_color_in_head: false,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`,
      },
    },
  ],
};


link-resolver.js

exports.linkResolver = doc => {
  // URL for a story type
  if (doc.type === 'story') {
    return `/stories/${doc.uid}`;
  }

  // URL for top-level page types
  if (
    doc.type === 'basic_page' ||
    doc.type === 'stories' ||
    doc.type === 'jobs'
  ) {
    return `/${doc.uid}`;
  }

  // Backup for all other types
  return '/';
};
2

Realized I was add the page template incorrectly. Updated my gatsby-browser and gatsby-ssr files but still not working

updated gatsby-ssr and gatsby-browser.js

import * as React from 'react';
import { Link as GatsbyLink } from 'gatsby';
import { PrismicLink, PrismicProvider } from '@prismicio/react';
import {
  PrismicPreviewProvider,
  componentResolverFromMap,
} from 'gatsby-plugin-prismic-previews';

import { linkResolver } from './src/utilities/link-resolver';
import StoryTemplate from './src/pages/{PrismicStory.url}';
import BasicPageTemplate from './src/pages/{PrismicBasicPage.url}';

const richTextComponents = {
  hyperlink: ({ children, node }) => (
    <PrismicLink field={node.data}>{children}</PrismicLink>
  ),
};

export const wrapRootElement = ({ element }) => (
  <PrismicProvider
    internalLinkComponent={({ href, ...props }) => (
      <GatsbyLink to={href} {...props} />
    )}
    linkResolver={linkResolver}
    richTextComponents={richTextComponents}
  >
    <PrismicPreviewProvider
      repositoryConfigs={[
        {
          repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
          linkResolver,
          componentResolver: componentResolverFromMap({
            story: StoryTemplate,
            basic_page: BasicPageTemplate,
          }),
        },
      ]}
    >
      {element}
    </PrismicPreviewProvider>
  </PrismicProvider>
);
3

Hey @ry.johnson, which version of the plugins are you using in your project?

5

gatsby-source-prismic: 5.2.10
gatsby-plugin-prismic-previews: 5.2.10

6

Can you show us a screenshot of the error, and the 404 page?

7

Here you go:

CleanShot 2022-12-28 at 00.20.42@2x
CleanShot 2022-12-28 at 00.20.42@2x1920×1000 64.3 KB

CleanShot 2022-12-28 at 00.25.36@2x
CleanShot 2022-12-28 at 00.25.36@2x1454×412 227 KB

It's now working correctly on the production site, but not locally. Clicking on "Preview custom 404 page" brings me to the correct preview though.

8

On that same page, click on "Preview custom 404 page". That will take you to your custom preview page.