Implementing a blog via Prismic/Gatsby (Part 1)

Published on May 2, 2020 7:04 PM PST

Setup

Prismic has an article discussing how to use Prismic with Gatsby through the use of the GraphQL based plugin. It is helpful. I came across a few stumbling blocks, but here are the general steps for setup in your Gatsby project:

  1. Install the two NPM packages that make Prismic work with Gatsby and React.
  2. Create a link resolver file.
  3. Setup the plugin in gatsby-config.js

That's it! Of course, there are some extra checks/steps to make sure everything is working.

Checking GraphQL

Check http://localhost:8000/__graphql to make sure prismic appears in the Explorer/is queryable. If it doesn't appear, there are some potential problems in the gatsby-config options for the plugin that need fixing:

  • repositoryName in gatsby-config.js is wrong. It should be the name of your Prismic repository name (you create this when making a project on the Prismic website).
  • type is not one word. Currently there seems to be issues parsing types that are more than one word (i.e. has spaces).

If everything works and you have saved and published content via the Prismic CMS, then you should be able to see the data via the GraphQL explorer.

Next time, we'll discuss rendering the data in Gatsby.