Getting previews to work

[jorg]

I'm using this guide: https://github.com/angeloashmore/gatsby-source-prismic/blob/master/docs/previews-manual-setup.md#navigate-to-the-documents-page

However, usePrismicPreview.previewData is undefined, thus not rendering any previews.

Also each preview is redirecting to the /unpublishedPreview route and I'm seeing a request to page-data.json gives a 404 in the console.

How can I debug this?

[Pau]

Hello, thanks for reaching out!

Ensure that you update the repositoryName to match the URL of the Prismic repository in all the files that require it.

Are you trying to preview your project locally or on a deployed site?

[jorg]

Thanks for the reply @Pau. I'm using the correct repositoryName both in usePrismicPreview and gatsby-config.js. I'm testing this on gatsby cloud.

[jorg]

This is my preview.tsx

import { navigate, PageProps, useStaticQuery, graphql } from 'gatsby';
import { usePrismicPreview } from 'gatsby-source-prismic';
import React, { FC, useEffect } from 'react';

// Note that the `location` prop is taken and provided to the `usePrismicPreview` hook.
const PreviewPage: FC = ({ location }) => {
  const { allSitePage } = useStaticQuery(
    graphql`
      {
        allSitePage {
          nodes {
            path
          }
        }
      }
    `,
  );

  const allPaths = allSitePage.nodes.map(node => node.path);

  const { isPreview, previewData, path } = usePrismicPreview({
    // The repositoryName value from your `gatsby-config.js`.
    repositoryName: 'XXXXXXXX',
  });

  // This useEffect runs when values from usePrismicPreview update. When
  // preview data is available, this will save the data globally and redirect to
  // the previewed document's page.
  useEffect(() => {
    // If this is not a preview, skip.
    //   null = Not yet determined if previewing.
    //   true = Preview is available.
    //   false = Preview is not available.
    if (isPreview === false) return;

    // Save the preview data to somewhere globally accessible. This could be
    // something like a global Redux store or React context.
    //
    // We'll just put it on window.
    console.log(previewData);
    window.__PRISMIC_PREVIEW_DATA__ = previewData;

    if (allPaths.includes(path)) {
      navigate(path);
    } else {
      navigate('/unpublishedPreview');
    }
  }, [isPreview, previewData, path]);

  // Tell the user if this is not a preview.
  if (isPreview === false) return <div>Not a preview!</div>;

  return <div>Loading preview...</div>;
};

export default PreviewPage;

[Pau]

You config seem ok. Are you making sure you're not missing any of the other steps?

• Create a route for unpublished pages
• Add a helper to merge the preview data
• Render the usePreviewData

Also, you need to make sure you start the preview session from within a document in your repository, by clicking the eye button.

[jorg]

Hi Paulina,

Thanks for the response. I checked the files and all is implemented like the guide is instructing.

In my preview.tsx I'm trying to log previewData and Path and they are both undefined. Shouldn't this contain the previewdata from prismic? isPreview resolves to true

 import { navigate, PageProps, useStaticQuery, graphql } from 'gatsby';
 import { usePrismicPreview } from 'gatsby-source-prismic';
 import React, { FC, useEffect } from 'react';

 const PreviewPage: FC = ({ location }) => {
 const { allSitePage } = useStaticQuery(
   graphql`
     {
       allSitePage {
         nodes {
           path
         }
       }
     }
   `,
 );

  const allPaths = allSitePage.nodes.map(node => node.path);

  const { isPreview, previewData, path } = usePrismicPreview({
    repositoryName: 'XXXXXX',
  });

  useEffect(() => {
    if (isPreview === false) return;
    console.log(isPreview);
    console.log(path);
    console.log(previewData);
    window.__PRISMIC_PREVIEW_DATA__ = previewData;

    if (allPaths.includes(path)) {
      navigate(path);
    } else {
      navigate('/unpublishedPreview');
    }
  }, [isPreview, previewData, path]);

  if (isPreview === false) return <div>Not a preview!</div>;

  return <div>Loading preview...</div>;
};

export default PreviewPage;

[Pau]

Hey Jorg, I'm not sure what could be wrong. Everything looks just fine in your config, and if you have setup previews in your repo. If you want you can send me your project via dm and I can take a look so we can try and debug this together

[andrey.drozd]

I'm having the same issue setting up previews, except I'm not using Gatsby Cloud. I believe this is a Prismic issue as the plugin looks for token and documentId query strings in the url, but what is in the url is previewId, document and version. As you can see in this link (gatsby-source-prismic/usePrismicPreview.ts at c86470cf30a51dfd8607106d15e93f2521b87d80 · angeloashmore/gatsby-source-prismic · GitHub), the function in lines 124-133 is looking for parameters that aren't coming back from Prismic. The useEffect in 138-144 sets isPreview to false as a result.

[andrey.drozd]

Other people have had issues setting up previews with this plugin, but at least they had the correct query string parameters to work with, as shown in this GitHub issue. Unable to Preview pages, returns preview resolver · Issue #263 · angeloashmore/gatsby-source-prismic · GitHub