Preview infinite GET request

Github issue open: Preview infinite GET request · 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

Screenshot of Console

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

Hi there,

Welcome to the Prismic community,

Before troubleshooting this issue, I would like to be sure it is not related to the preview issue that we have just deployed a fix to it today.

For that, can you please re-check if it is working now? And would be great if you can share your repository name (in a private message if necessary).

Best,
Fares

Hey Fares,

Thank yo so much for the warm welcome!

The solution was: GraphQL aliases is not supported in preview mode, I had to modify it all.

The solution was provided by: Angelo Ashmore

https://github.com/prismicio/prismic-gatsby/issues/434#issuecomment-905775725

If somebody with problems I recommend you to check out this link with some limitations which Prismic Preview's have:

https://github.com/prismicio/prismic-gatsby/blob/main/packages/gatsby-plugin-prismic-previews/docs/limitations.md

Furthermore, an excellent list with common problems and solutions:
https://community.prismic.io/t/troubleshooting-previews/5449

Big hug,
Luis

2 Likes

Awesome, thanks for letting us know.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.