Github issue open: Data not appearing during previews · Issue #434 · prismicio/prismic-gatsby · GitHub
Versions
- gatsby-source-prismic: ^4.1.0
- gatsby-plugin-prismic-previews: ^4.1.0
- node: 14.x (vercel)
Problem
The preview feature is displaying just the layout component (navbar & footer) without the slices which are inside of the page. The routing of link-resolver seems to work just fine but isn't displaying the information that it should do.
Here is a list with my configuration:
page.tsx (template)
import React from "react"
import { graphql } from "gatsby"
import { withPrismicPreview } from "gatsby-plugin-prismic-previews"
import { SliceZone } from "../slices/slice-zone"
import { Layout } from "../components/Layout"
import SEO from "../components/seo"
import { repositoryConfigs } from "../utils/prismicPreviews"
interface IPage {
data: any
}
const Page = ({ data }: IPage) => {
if (!data) return null
const { prismicPage } = data
return (
<Layout>
<SEO
seoData={{
data: {
seoTitle: prismicPage.data.seoTitle,
seoDescription: prismicPage.data.seoDescription,
},
url: prismicPage.uid,
}}
/>
<SliceZone slices={prismicPage.data.body} />
</Layout>
)
}
export const query = graphql`
query PageQuery($uid: String) {
prismicPage(uid: { eq: $uid }) {
_previewable
uid
data {
seoTitle: seo_title
seoDescription: seo_description
}
...MainHeroInfo
...HeroImageTextInfo
}
}
`
export default withPrismicPreview(Page, repositoryConfigs)
package.json
{
"name": "gatsby-starter-chakra",
"private": true,
"description": "Gatsby Starter: Chakra UI with all essentials tools for a new customer",
"version": "0.0.1",
"license": "MIT",
"author": "Luis Kunz <me@luiskunz.com>",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"dev": "gatsby develop -o",
"serve": "gatsby serve",
"clean": "gatsby clean",
"format": "prettier \"**/*.{md,mdx,yml}\" --write",
"tsc": "tsc",
"type-check": "tsc --noEmit",
"lint": "eslint . --ignore-path .gitignore --ext .ts,.tsx,.js",
"lint:fix": "yarn lint --fix"
},
"dependencies": {
"@browniebroke/gatsby-image-gallery": "^6.2.1",
"@chakra-ui/gatsby-plugin": "^2.0.0",
"@chakra-ui/icons": "^1.0.13",
"@chakra-ui/react": "^1.6.1",
"@chakra-ui/theme-tools": "^1.1.7",
"@emotion/react": "^11",
"@emotion/styled": "^11",
"babel-plugin-styled-components": "^1.12.0",
"dotenv": "^8.2.0",
"framer-motion": "^4",
"gatsby": "^3.3.1",
"gatsby-image": "^3.3.0",
"gatsby-plugin-catch-links": "^3.3.0",
"gatsby-plugin-gdpr-cookies": "^2.0.0",
"gatsby-plugin-google-gtag": "^3.3.0",
"gatsby-plugin-image": "1.12.0",
"gatsby-plugin-lodash": "^4.3.0",
"gatsby-plugin-manifest": "^3.3.0",
"gatsby-plugin-offline": "^4.3.0",
"gatsby-plugin-prismic-previews": "^4.1.0",
"gatsby-plugin-react-helmet": "^4.3.0",
"gatsby-plugin-sharp": "^3.7.1",
"gatsby-plugin-sitemap": "^3.3.0",
"gatsby-source-filesystem": "^3.3.0",
"gatsby-source-prismic": "^4.1.0",
"gatsby-transformer-sharp": "^3.7.1",
"js-cookie": "^2.2.1",
"lodash": "^4.17.21",
"prismic-reactjs": "^1.3.4",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-headroom": "^3.1.1",
"react-helmet": "^6.1.0",
"react-icons": "^4.2.0",
"react-player": "^2.9.0",
"react-responsive-carousel": "^3.2.18",
"react-typography": "^0.16.19",
"ts-node": "^10.0.0",
"typeface-montserrat": "^1.1.13",
"typeface-nunito": "^1.1.13",
"typeface-proza-libre": "^1.1.13",
"typography": "^0.16.19"
},
"devDependencies": {
"@types/node": "^15.6.1",
"@types/react": "^17.0.8",
"@types/react-dom": "^17.0.5",
"@typescript-eslint/eslint-plugin": "^4.25.0",
"@typescript-eslint/parser": "^4.25.0",
"eslint": "^7.27.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22",
"prettier": "^2.3.0",
"typescript": "^4.3.2"
},
"keywords": [
"gatsby",
"chakra",
"ui",
"chakra ui"
]
}
gatsby-config.js
require(`ts-node`).register({ transpileOnly: true, files: true })
require(`dotenv`).config({
path: `.env`,
})
const config = require(`./config/website`)
const layout = require(`./prismic/layout.json`)
const homepage = require(`./prismic/homepage.json`)
const page = require(`./prismic/page.json`)
module.exports = {
siteMetadata: {
siteUrl: config.siteUrl,
title: config.title,
description: config.siteDescription,
keywords: [`keywords`],
author: config.author,
canonicalUrl: config.siteUrl,
image: config.siteLogo,
organization: {
name: config.organization,
url: config.siteUrl,
logo: config.siteLogo,
},
},
plugins: [
`gatsby-plugin-react-helmet`,
`@chakra-ui/gatsby-plugin`,
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Client Name`,
short_name: `Client Name`,
lang: `en-gb`,
start_url: `/`,
background_color: `#f97316`,
theme_color: `#f97316`,
display: `standalone`,
icons: [
{
src: `/favicons/android-chrome-192x192.png`,
sizes: `192x192`,
type: `image/png`,
},
{
src: `/favicons/android-chrome-512x512.png`,
sizes: `512x512`,
type: `image/png`,
},
],
},
},
{
resolve: `gatsby-source-prismic`,
options: {
repositoryName: `client-repo`,
accessToken: process.env.PRISMIC_API_KEY,
// eslint-disable-next-line global-require
linkResolver: require(`./src/utils/link-resolver`).linkResolver,
schemas: {
layout,
homepage,
page,
...
},
imageImgixParams: {
auto: `compress,format`,
fit: `max`,
q: 50,
},
imagePlaceholderImgixParams: {
w: 100,
blur: 15,
q: 50,
},
},
},
{
resolve: `gatsby-plugin-prismic-previews`,
options: {
repositoryName: `client-repo`,
accessToken: process.env.PRISMIC_API_KEY,
},
},
{
resolve: `gatsby-plugin-google-gtag`,
options: {
trackingIds: [config.googleAnalyticsID],
pluginConfig: {
head: true,
exclude: [`/404/*`, `/preview/*`, `/en/imprint`, `/impressum`],
},
},
},
{
resolve: `gatsby-plugin-sitemap`,
options: {
exclude: [`/en/offline-plugin-app-shell-fallback`, `/imprint`, `/en/imprint`],
},
},
{
resolve: `gatsby-plugin-gdpr-cookies`,
options: {
googleAnalytics: {
trackingId: config.googleAnalyticsID, // leave empty if you want to disable the tracker
cookieName: `gatsby-gdpr-google-analytics`, // default
anonymize: true, // default
allowAdFeatures: false, // default
},
// defines the environments where the tracking should be available - default is ["production"]
environments: [`production`, `development`],
},
},
`gatsby-plugin-lodash`,
`gatsby-plugin-catch-links`,
// `gatsby-plugin-webpack-bundle-analyser-v2`,
`gatsby-plugin-offline`,
],
}
link-resolver.js
exports.linkResolver = (doc) => {
if (doc.isBroken) {
return `/404`
}
if (doc.type === `homepage`) {
return `/`
}
if (doc.type === `page`) {
return `/${doc.uid}`
}
// Backup for all other types
return `/`
}
preview.js
import * as React from "react"
import { withPrismicPreviewResolver } from "gatsby-plugin-prismic-previews"
import { repositoryConfigs } from "../utils/prismicPreviews"
const PreviewPage = ({ isPreview }) => {
if (isPreview === false) return `Not a preview!`
return <h1>Loading...</h1>
}
export default withPrismicPreviewResolver(PreviewPage, repositoryConfigs)
prismicPreviews.tsx
/**
* This file contains configuration for `gatsby-plugin-prismic-previews` to
* support preview sessions from Prismic.
*
* @see https://prismic.io/docs/technologies/previews-gatsby
*/
import { linkResolver } from "./link-resolver"
/**
* Prismic preview configuration for each repository in your app. This set of
* configuration objects will be used with the `withPrismicPreview` and
* `withPrismicUnpublishedPreview` higher order components.
*
* If your app needs to support multiple Prismic repositories, add each of
* their own configuration objects here as additional elements.
*
* @see https://prismic.io/docs/technologies/previews-gatsby#1.-update-content-pages-and-templates
*/
export const repositoryConfigs = [
{
repositoryName: `michaelbernegger`,
linkResolver,
},
]
Things I tried
Test in the Graphql browser:
When I send the data using the ModHeader I do receive the preview data, meaning that something is wrong in my code (which I am still struggling to find).
The rest of the solutions I did try without any success, in fact, I know that something is wrong in my code which I can't figure out for 3 days.
Browsers
I try in: Firefox, Brave & Safari. (I try cleaning the cache & cookies several times)
Infinite bucle inside of console inspector --- Network tab
This bucle keeps going every 1-2s, I can't figure out what it does.
Conclusion
I have tried many solutions and I have seen the repos which are working perfectly fine and I still I can't find what am I missing. In advance, I will be really grateful to receive any help as small as it could be!
Best regards,
Luis