Developers / GraphQL / Set up

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.

Create a repository in Prismic

A content repository is where you define, edit, and publish content.

Create Repository

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 Prismic packages

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.

Copy
npm install @apollo/client @prismicio/client

Create a GraphQL API 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.
prismicio.js
Copy
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.

Using other GraphQL clients

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.

urql

First, install urql:

Copy
npm install urql

Next, replace the client export in the prismicio.js file described in the guide with the following:

prismicio.js
Copy
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.

Copy
import { gql } from 'urql'
import { client } from './client'

client.query(gql`
  // Your GraphQL query goes here
`).toPromise()

graphql-request

First, install graphql-request:

Copy
npm install graphql-request

Next, replace the client export in the prismicio.js file described in the guide with the following:

prismicio.js
Copy
import { GraphQLClient } from "graphql-request";

// The rest of the file...

export const client = new GraphQLClient(
  prismic.getGraphQLEndpoint(repositoryName),
  {
    fetch: prismicClient.graphqlFetch,
    method: "get",
  }
);

← Previous

Overview

Next →

Query Data

Was this article helpful?
Not really
Yes, Thanks

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.