Hi,
I have tried solving the issue myself by reading through the posts and sadly I was without luck. You are talking to a noob(ie) here, so I hope you can help. I tried to set up previews for our project. I am struggling with debugging it. Any help would be appreciated.
We are using:
(I know this is not up to date but I wanted to first get the previews working before running in a bunch of dependancy trouble)
gatsby: 4.23.0
gatsby-source-prismic: 5.2.9
gatsby-plugin-prismic-previews: 5.2.5
@prismicio/client: 6.7.3
@prismicio/react: 2.5.0
react: 18.1.0
Our relevant files
404.tsx
import { withPrismicUnpublishedPreview } from "gatsby-plugin-prismic-previews";
import * as React from "react"
import { graphql, PageProps } from "gatsby"
import "../../src/stylesheets/main.scss"
import Layout from "../components/layout/Layout"
import Container from "../components/helpers/Container"
import Hero from "../components/slices/Hero"
import NotFoundImage from "../images/404.jpeg"
const heroData: Queries.HeroFragment = {
slice_type: "",
primary: {
title: { text: "Page not found" },
subtitle: { text: "The page you requested could not be found." },
image: {
url: NotFoundImage,
gatsbyImageData: null,
thumbnails: {
md: { url: NotFoundImage },
xs: { url: NotFoundImage },
}
}
}
}
const NotFoundPage: React.FC<PageProps<Queries.NotFoundPageQuery>> = ({ data }) => (
<Layout headerData={data.prismicNavigation3!} siteMetadata={{title: "404: Not found"}}>
<Hero {...heroData}/>
<Container>
<p>
Please have a look at the navigation or{" "}
<a href="mailto:XXX">contact us</a> if you cannot find
what you are looking for.
</p>
</Container>
</Layout>
)
export const query = graphql`
query NotFoundPage {
prismicNavigation3 {
... Header
}
}
`
export default withPrismicUnpublishedPreview(NotFoundPage)
gatsby-browser.tsx and gatsby-ssr.tsx
import * as React from "react"
import { PrismicPreviewProvider, componentResolverFromMap } from "gatsby-plugin-prismic-previews"
import { linkResolver } from "./src/utils/linkResolver";
import PageComponent from "./src/components/PageComponent"
export const wrapRootElement = ({ element }) => (
<PrismicPreviewProvider
repositoryConfigs={[
{
repositoryName: "[XXX]",
linkResolver,
componentResolver: componentResolverFromMap({
page: PageComponent,
}),
},
]}>
{element}
</PrismicPreviewProvider>
)
gatsby-config.ts
import { linkResolver } from "./src/utils/linkResolver";
const config: GatsbyConfig = {
siteMetadata: {
title: `XXX`,
description: `XXX`,
author: `XXX`,
siteUrl: `XXX`
},
// More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
// If you use VSCode you can also use the GraphQL plugin
// Learn more at: https://gatsby.dev/graphql-typegen
graphqlTypegen: true,
plugins: [
"gatsby-plugin-styled-components",
"gatsby-plugin-image",
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
"gatsby-plugin-react-helmet",
{
resolve: 'gatsby-source-filesystem',
options: {
name: "images",
path: "./src/images/"
},
__key: "images"
},
{
resolve: 'gatsby-source-prismic',
options: {
repositoryName: "XXX",
linkResolver: linkResolver,
customTypesApiToken: "XXX",
previews: true,
}
},
{
resolve: 'gatsby-plugin-prismic-previews',
options: {
repositoryName: "XXX",
accessToken: "XXX",
linkResolver: linkResolver
},
},
{
resolve: 'gatsby-plugin-sass',
options: {
sassOptions: {
// data: '@import "module.scss";',
// includePaths: ["src/stylesheets/base/mixins"],
},
}
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `XXX,
short_name: `XXX`,
description: `XXX.`,
start_url: `/`,
background_color: `#f7f0eb`,
theme_color: `#a2466c`,
display: `standalone`,
icon: 'src/images/favicon.png'
},
},
]
};
export default config;
link-resolver.ts
import { graphql } from 'gatsby';
export const linkResolver: prismicH.LinkResolverFunction<string> = (doc) => {
if (doc === undefined || doc.isBroken) {
return "/not-found"
}
if (doc.type == "page") {
if (doc.uid === "homepage") {
return "/"
}
return `/${doc.uid}`
}
return "/"
}
// export const fragmentLink = graphql`
// fragment LinkData on PrismicLinkType {
// link_type
// type
// lang
// id
// tags
// uid
// }
// `
// export type TLinkData = {
// readonly link_type: Queries.PrismicLinkTypeEnum | null;
// readonly type: string | null;
// readonly lang: string | null;
// readonly id: string | null;
// readonly tags: readonly (string | null)[] | null;
// readonly uid: string | null;
// } | null
preview.tsx
import { withPrismicPreview } from "gatsby-plugin-prismic-previews"
import { linkResolver } from "../utils/linkResolver"
const PreviewPage: React.FC = () => {
return (
<div>
<h1>Loading preview...</h1>
</div>
)
}
export default withPrismicPreview(PreviewPage, [{
repositoryName: "XXX",
linkResolver,
},
])
Impacted feature
What steps have you taken to resolve this issue already?
- checked github and read through blog posts
- included the missing dependancies
Errors
I'm stuck in the Loading Preview Page:
When I klick one "1 doc" I land at the following and afterwards (clicking on API overview) on the first page again:
Your Role
Junior Dev
Hosting provider
Netlify
Package.json file
{
"name": "XXX",
"version": "1.0.0",
"private": true,
"description": "XXX",
"author": "XXX",
"keywords": [
"gatsby"
],
"scripts": {
"develop": "gatsby clean && gatsby develop",
"start": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@imgix/gatsby": "1.7.7",
"@prismicio/client": "6.7.3",
"@prismicio/react": "2.5.0",
"@types/react-alice-carousel": "^1.15.3",
"@types/react-helmet": "^6.1.5",
"@types/react-highlight": "^0.12.5",
"babel-plugin-styled-components": "^2.0.7",
"gatsby": "^4.23.0",
"gatsby-plugin-image": "^2.23.0",
"gatsby-plugin-manifest": "^4.23.1",
"gatsby-plugin-prismic-previews": "5.2.5",
"gatsby-plugin-react-helmet": "^5.24.0",
"gatsby-plugin-sass": "^5.23.0",
"gatsby-plugin-sharp": "^4.23.0",
"gatsby-plugin-styled-components": "^5.23.0",
"gatsby-source-filesystem": "^4.23.0",
"gatsby-source-prismic": "^5.2.9",
"gatsby-transformer-sharp": "^4.23.0",
"mobx": "^6.6.2",
"react": "^18.1.0",
"react-alice-carousel": "^2.6.4",
"react-dom": "^18.1.0",
"react-helmet": "^6.1.0",
"react-highlight": "^0.14.0",
"react-hook-form": "^7.36.0",
"redoc": "^2.0.0",
"sass": "^1.54.9",
"sass-mq": "^6.0.0",
"styled-components": "^5.3.5"
},
"devDependencies": {
"@types/node": "^17.0.45",
"@types/react": "^18.0.19",
"@types/react-dom": "^18.0.6",
"typescript": "^4.8.3"
}
}