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.

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

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

• /src/prismic-config.js - Where you can update the repo name to use with your own Prismic repository
• /src/utils/prismicHelpers.js - Helper that instantiates the Apollo client so that you can make queries to the GraphQL API
• /src/utils/prismicQueries.js - Contains the GraphQL queries to Prismic to retrieve your content
• /src/utils/schemaQuery.js - The introspection query to fetch the fragment types. You can learn more about this on the Introspection fragment matching page.
• /src/pages/ - The components for the various web pages in the project

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.