Set up Prismic
This article explains how to install and configure Prismic in a GraphQL project. By the end of this page, you will have Prismic utilities installed in your app.
This guide uses Apollo Client for handling GraphQL queries. Clients like urql or graphql-request can also be used. Find walkthroughs for how to configure them at the end of the guide.
Required knowledge
This guide does not assume any prior knowledge of React and GraphQL, but a basic understanding would be helpful. For an introduction, we recommend the introductory tutorials for GraphQL and React.
Prerequisites
Before you get started, you will need a React project to work with.
Package version
This guide uses @prismicio/client version 6. If you already have a project that uses an older version, see @prismicio/client v6 Migration Guide
Let's walk through all the steps to integrate Prismic into your project.
A content repository is where you define, edit, and publish content.
Next, you'll need to model your content, create your Custom Types, and publish some documents to your repository. To learn more, check out our documentation for Creating Custom Types.
Now, let's connect this new content with your project.
Install @prismicio/client and @apollo/client to your project. @prismicio/client will connect the client to your Prismic repository, and @apollo/client will be used to make GraphQL queries
Launch the terminal (command prompt or similar on Windows), point it to your project location, and run the following command.
npm install @apollo/client @prismicio/client
Next, we need to create a GraphQL client connected to your Prismic API to retrieve your content.
Create a file named prismicio.js with the below contents. You will need to make the following changes:
- Update the repositoryName to your own.
- Add an access token if you have one.
- Update the routes to match the Custom Types in your repository. If your app does not use a router, omit the routes option.
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
import * as prismic from '@prismicio/client'
// Fill in your repository name
export const repositoryName = 'your-repo-name'
const prismicClient = prismic.createClient(
prismic.getEndpoint(repositoryName),
{
// If your repository is private, add an access token
accessToken: '',
// This defines how you will structure URL paths in your project.
// Update the types to match the Custom Types in your project, and edit
// the paths to match the routing in your project.
//
// If you are not using a router in your project, you can change this
// to an empty array or remove the option entirely.
routes: [
{
type: 'page',
path: '/:uid',
},
],
}
)
export const client = new ApolloClient({
link: new HttpLink({
uri: prismic.getGraphQLEndpoint(repositoryName),
fetch: prismicClient.graphqlFetch,
useGETForQueries: true,
}),
cache: new InMemoryCache(),
})
You will use the client exported from this file to write your queries.
While this guide shows how to use Prismic's GraphQL API with Apollo Client, other clients, such as urql or graphql-request, can be used similarly. You may want to use a different client if you want something more minimal or prefer a different API.
First, install urql:
npm install urql
Next, replace the client export in the prismicio.js file described in the guide with the following:
import { createClient } from "urql";
// The rest of the file...
export const client = createClient({
url: prismic.getGraphQLEndpoint(repositoryName),
fetch: prismicClient.graphqlFetch,
preferGetMethod: true,
});
The client can now be used to query your content.
import { gql } from 'urql'
import { client } from './client'
client.query(gql`
// Your GraphQL query goes here
`).toPromise()
npm install graphql-request
Next, replace the client export in the prismicio.js file described in the guide with the following:
import { GraphQLClient } from "graphql-request";
// The rest of the file...
export const client = new GraphQLClient(
prismic.getGraphQLEndpoint(repositoryName),
{
fetch: prismicClient.graphqlFetch,
method: "get",
}
);
Was this article helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.