React with GraphQL

For anyone looking to use Prismic with React.js & GraphQL, we've created an example project that you can use. Feel free to either explore the project or use it as a boilerplate to launch your own website.

Example project

To get started, check out or download the example project.

Important files

Here are some of the key bits of code when using React.js with the Prismic GraphQL API:

Using the Prismic docs

These React docs are mostly meant to be used with Prismic's Rest API using the @prismicio/client library. For that reason it's important to note that when you're exploring the docs, you'll sometimes need to refer to the GraphQL documentation rather than the React docs.

Here's when you should use one over the other:

  • Queries - Use the GraphQL docs to help you build your GraphQL queries
  • Rendering - Use the React docs for this. They will explain how to use the prismic-reactjs library to render your Prismic content.
  • Previews - Use the GraphQL docs and the example project above to see how to setup live previews.

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.