Gatsby Plugin Prismic Previews gatsby-plugin-prismic-previews not working

Developing with Prismic
1

Hello Prismic Community!

I've search here for topics about gatsby-plugin-prismic-previews not working but it's not the same issue I got recently.

I followed all instruction the gatsby-plugin-prismic-previews v5.3.1. When I clicked the "View" icon, all i get is the /preview page in Gatsby like "Loading preview.."

The preview.jsx code is this:

import * as React from "react";
import { withPrismicPreviewResolver } from "gatsby-plugin-prismic-previews";

const PreviewPage = () => {
  return (
    <div>
      <h1>Loading preview…</h1>
    </div>
  );
};

export default withPrismicPreviewResolver(PreviewPage);

Is there something wrong?

I'm using this for a client project using Prismic for CMS.

Please help...

2

Hello Prismic,

Are you not interested with Gatsby anymore?

I need help.. Please help...

3

Hi Team,

Have you tried our preview troubleshooting article?

Have you updated your link resolver?

Is this a custom type that has at least one published document, or has it never been published?

Is this on all custom types or just one?

Are you seeing any errors in the browser console or in your terminal?

Thanks.

5

Hello Phil,

Actually, the issue on the /preview page is still showing the "Loading preview…" is I tried to use a Gatsby Starter here:

gatsby-starter-prismic-blog: GitHub - maheshsamudra/gatsby-starter-prismic-blog: Gatsby starter for a Prismic project.

The link resolver is this one:

exports.linkResolver = (doc) => {
  switch (doc.type) {
    case "post":
      return `/blog/${doc.uid}`;

    default:
      if (!doc.uid) return "/";
      return doc.uid;
  }
};

And it's using gatsby-plugin-prismic-previews v5.3.1. I think it's last update is 8 months ago.

Is it missing updates?

Thank you for helping.. I hope you can help me more..

6

The linked project is not one maintained by us.

Try our official one:

7

Hello Phil,

I will try it out and see f it's finally the correct one.

I will let you know if it's working.

Thank you so much!

1 Like
9

Hello Phil,

I need you help again.

The Gatsby repo that I used for Prismic Previews is now working.

My challenge right now is that the Preview is working on published blog posts.

Can you help me on how the Preview will also work on unpublished blog posts?

Please help...

10

You'll need to make sure that the preview script is included in your 404 page so it can get the link resolver. :slight_smile:

11

Hello Phil,

Thank you for the quick reply..

Can you provide an example? Something that I can use right now.

Please..

12

:slight_smile:

13

Hello Phil,

Thank you so much for the solution!

Aside from the 404 page update, all I did to was to update my previews.js file with componentResolverFromMap like here:

import { componentResolverFromMap } from "gatsby-plugin-prismic-previews";

import { linkResolver } from "./link-resolver";

import PostTemplate from "../../src/pages/blog/{prismicBlogPost.uid}";

/**
 * Prismic preview configuration for each repository in your app. This set of
 * configuration objects will be used with the `PrismicPreviewProvider`
 * higher order component.
 *
 * If your app needs to support multiple Prismic repositories, add each of
 * their own configuration objects here as additional elements.
 *
 */
export const repositoryConfigs = [
  {
    repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
    linkResolver,
    componentResolver: componentResolverFromMap({
      blog_post: PostTemplate,
    }),
  },
];

Thank you so much for all the help! You're the best!
:grin: :raised_hand: :+1:

1 Like