'data' is not defined withPrismicPreview

[OllieJT]

Hello all,

After unsuccessfully setting up gatsby-source-prismic-graphql due to this issue with GraphQLSource, I have resorted to using the 'classic' gatsby-source-prismic plugin (successfully)

To clarify, before adding the preview plugin Prismic is working just fine.

Unfortunately, despite following the documentation I am having some issues with this preview plugin. In my template and page files, I have imported withPrismicPreview, and am exporting the component with it as suggested in the readme:

export default withPrismicPreview({ data })(About)

The problem I have is on build or deploy I am receiving the error 'data' is not defined for every page that I am using withPrismicPreview.

Example page component

import React from 'react';
import { graphql } from 'gatsby';
import { withPrismicPreview } from 'gatsby-plugin-prismic-preview';
import SEO from '../components/seo/SEO';
import { DefaultHeader } from '../components/header/Header';
import { GridHero } from '../components/header/Hero';
import SliceZone from '../components/SliceZone';

const About = ({ data }) => {
  const page = data.prismicAbout;
  const content = page.data;

  return (
    <>
      <SEO
        title={`${content.seo_title_short}`}
        pathname="/about"
        desc={content.seo_description.text}
        //banner={content.seo_thumbnail.url}
        firstDate={page.first_publication_date}
        lastDate={page.last_publication_date}
        article
      />

      <GridHero />

      <DefaultHeader
        title={`${content.title.text}`}
        subtitle={`${content.title.text}`}
        description={`${content.title.text}`}
      />
      <SliceZone allSlices={content.content} />
    </>
  );
};

const query = graphql`
  query AboutPageQuery {
    prismicAbout {
      first_publication_date
      last_publication_date
      data {
        title {
          html
          text
        }
        seo_title_short
        seo_title_long
        seo_description {
          text
        }
        content {
          ... on PrismicAboutContentText {
            slice_type
            id
            primary {
              text {
                html
              }
            }
          }
          ... on PrismicAboutContentContentList {
            slice_type
            id
            primary {
              section_title {
                html
                text
              }
            }
            items {
              heading {
                html
              }
              rich_text {
                html
              }
            }
          }
          ... on PrismicAboutContentProfileContent {
            slice_type
            id
            primary {
              section_title {
                html
                text
              }
              staff {
                url
                document {
                  id
                  uid
                  data {
                    name
                    alias
                    avatar {
                      alt
                      copyright
                      url
                    }
                    role
                    team
                    location
                    bio {
                      html
                      text
                    }
                    body {
                      id
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`;

export default withPrismicPreview({ data })(About);

Config

plugins: [
...
    {
      resolve: 'gatsby-source-prismic',
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        accessToken: process.env.GATSBY_PRISMIC_ACCESS_TOKEN,
        // Get the correct URLs in blog posts
        //linkResolver: () => post => `/${post.uid}`,
        linkResolver: () => prismicLinkResolver,
        // PrismJS highlighting for labels and slices
        htmlSerializer: () => prismicHtmlSerializer,
        // Remove this config option if you only have one language in your Prismic repository
        lang: '*',
      },
    },
{
      resolve: 'gatsby-plugin-prismic-preview',
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        linkResolver: require('./src/utils/linkResolver'),
        path: '/preview',
      },
    }
...
]

I know you're not maintaining this anymore, but if you know of a fix for this I would happily submit a pull request to clarify any details and examples in the readme @birkir