I was following the prismic guide to setting up Prismic Preview, but after completing step 2 it says that if using Gatsby Cloud, then I can stop there. However, after doing that and deploying, I am still unable to view previews from Prismic. When I launch preview from Prismic, I am just rdirected to the Preview page without it redirecting to the intended preview page.
Here is what I have configured:
gatsby-config.js
# import link resolver
const { linkResolver } = require("./src/utils/linkResolver")
...
# plugin configurations
{
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,
linkResolver: linkResolver,
},
},
{
resolve: "gatsby-plugin-prismic-previews",
options: {
repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
accessToken: process.env.PRISMIC_ACCESS_TOKEN,
},
},
linkResolver.js
exports.linkResolver = doc => {
// URL for a article type
if (doc.type === "article") {
return `/article/${doc.uid}`
}
// URL for a page type
if (doc.type === "page") {
return `/${doc.uid}`
}
// Backup for all other types
return "/"
}
gatsby-ssr.js and gatsby-browser.js
import * as React from "react"
import {
PrismicPreviewProvider,
componentResolverFromMap,
} from "gatsby-plugin-prismic-previews"
import "./src/styles/global.scss"
import { linkResolver } from "./src/utils/linkResolver"
import PageTemplate from "./src/pages"
import IndexPage from "./src/pages"
import ArticleTemplate from "./src/pages/{prismicArticle.url}"
export const wrapRootElement = ({ element }) => (
<PrismicPreviewProvider
repositoryConfigs={[
{
repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
linkResolver,
componentResolver: componentResolverFromMap({
homepage: IndexPage,
page: PageTemplate,
article: ArticleTemplate,
}),
},
]}
>
{element}
</PrismicPreviewProvider>
)
preview.tsx
import * as React from "react"
import { withPrismicPreviewResolver } from "gatsby-plugin-prismic-previews"
import Layout from "../components/layout"
const PreviewPage = () => {
return (
<Layout>
<div>
<h1>Loading preview…</h1>
</div>
</Layout>
)
}
export default withPrismicPreviewResolver(PreviewPage)
index.tsx
import * as React from "react"
import { graphql } from 'gatsby'
import { RichText } from 'prismic-reactjs'
import Seo from "../components/seo"
import { HomepageBanner } from "../components/homepageBanner"
import { SliceZone } from "../components/sliceZone"
import Layout from "../components/layout"
const IndexPage = ({data}: any) => {
if (!data) return null
const doc = data.prismicHomepage.data
return (
<Layout isHomepage>
<Seo title="Home" />
<HomepageBanner
title={RichText.asText(doc.banner_title.richText)}
description={RichText.asText(doc.banner_description.richText)}
linkUrl={doc.banner_link.url}
linkLabel={RichText.asText(doc.banner_link_label.richText)}
backgroundUrl={doc.banner_background.url}
/>
<SliceZone sliceZone={doc.body} />
</Layout>
)
}
export const query = graphql`
query Homepage {
prismicHomepage {
data {
banner_title {
richText
}
banner_description {
richText
}
banner_link {
url
type
uid
}
banner_link_label {
richText
}
banner_background {
url
}
body {
...on PrismicSliceType {
slice_type
}
...HomepageDataBodyText
...HomepageDataBodyQuote
...HomepageDataBodyFullWidthImage
...HomepageDataBodyImageGallery
...HomepageDataBodyImageHighlight
}
}
}
}
`
export default IndexPage
{prismicPage.url}.tsx
import * as React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import Seo from "../components/seo"
import { SliceZone } from "../components/sliceZone"
interface Props {
data: any
}
const PageTemplate = ({ data }: Props) => {
if (!data) return null
const doc = data.prismicPage
return (
<Layout>
<Seo title={doc.data.document_display_name.text} />
<SliceZone sliceZone={doc.data.body} />
</Layout>
)
}
export const query = graphql`
query PageQuery($id: String) {
prismicPage(id: { eq: $id }) {
data {
document_display_name {
text
}
body {
... on PrismicSliceType {
slice_type
}
...PageDataBodyText
...PageDataBodyQuote
...PageDataBodyFullWidthImage
...PageDataBodyImageGallery
...PageDataBodyImageHighlight
}
}
}
}
`
export default PageTemplate
I thought it might be my linkResolver, but it works fine when actually running locally or deployed in Gatsby Cloud.
I noticed in the url that the token appears to contain the url, which seems odd...
https://preview-mysite.gtsb.io/preview/?token=https%3A%2F%2Fmysite.prismic.io%2Fpreviews%2<some-id>%3FwebsitePreviewId%3<some-id>&documentId=<some-id>
Also, In my Layout component I have the following to add the script to all my pages:
<Helmet>
<script async defer src="https://static.cdn.prismic.io/prismic.js?new=true&repo=mysite"></script>
</Helmet>
The documentation I linked says that it should work from this point forward, and I'm not seeing any errors in the logs or the failed requests when I inspect the page. It seems like the preview page never triggers the actual content I'm trying to preview.