Get your GraphCMS data into Gatsby

Let’s set up Gatsby to pull data from GraphCMS.

This will be a walk-through of setting up some basic data on the headless CMS, GraphCMS and then querying that data in Gatsby.

1. Set up GraphCMS

Set yourself up with a GraphCMS account at https://app.graphcms.com/signup and select the developer plan.

2. Define Data

Create a new project and add in some data to query.

Select the Create new project option, call it what you like, in this example it’s going to be a list of projects, so I’m calling it Project List.

In the side bar select the Schema and create a model, in this case Project. In the project model we’re going to have a Title and a Description.

Select the fields from the tray on the right by clicking the FIELDS tab and dragging and dropping them into the Project model we created.

3. Configure the GraphCMS public API

In the GraphCMS settings set the Public API Permissions to READ scroll down to Endpoints and copy the URL for use in configuring Gatsby.

That’s it for the CMS configuration, now to pull that data into our Gatsby frontend!

4. Configure Gatsby

In you Gatsby project install gatsby-source-graphql and configure it in gatsby-config.js the configuration should looks something like:

1{
2  resolve: 'gatsby-source-graphql',
3  options: {
4    typeName: 'GRAPHCMS',
5    fieldName: 'graphCmsData',
6    url: 'https://api-euwest.graphcms.com/v1/projectid/master',
7  }
8},

In this example we’re using codesandbox.io for our text editor and the Gatsby Default Starter you get when selecting Gatsby from the SERVER TEMPLATES available to you in codesandbox.io

5. Query the data in Gatsby GraphiQL

Now that the endpoint is set up we will be able to query the data with Gatsby’s GraphiQL UI, we can shape the query we want to use to display the data here.

In the preview of our app in codesandbox.io if you add ___grapgql to the end of the url it will bring up the Gatsby GraphiQL UI, here we can shape the data we want to query.

If we open up some curly brackets {} and Cmd+space we’ll see the available fields where we can pick out the graphCmsData field we defined in the gatsby-source-graphql plugin.

Selecting the fields we created in GraphCMS then running the query will display our defined data.

1{
2  graphCmsData {
3    projects {
4      id
5      status
6      title
7      description
8    }
9  }
10}

6. Display the Data

Use the graphql gatsby export to query the data from the GraphCMS endpoint.

In pages/index.js add the graphql export the the gatsby imports.

1import { graphql, Link } from 'gatsby'

At the very bottom define the query:

1export const query = graphql`
2  {
3    graphCmsData {
4      projects {
5        id
6        status
7        title
8        description
9      }
10    }
11  }
12`

You will then be able to access the data prop in the IndexPage component, we’ll need to de-structure the data prop out in the arguments of the component:

1const IndexPage = ({ data }) => (

Now we can access the data passed into the component, we just need a way to visualise it! Luckily for use there’s a handy component from Wes Bos that we can use called Dump, so create a new dump.js component in components then import it into the index.js file, and add in the component to see what’s inside the props:

1const IndexPage = ({ data }) => (
2  <Layout>
3    <h1>Hi people</h1>
4    <Dump data={data} />
5    <p>Welcome to your new Gatsby site.</p>
6    <p>Now go build something great.</p>
7    <div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
8      <Image />
9    </div>
10    <Link to="/page-2/">Go to page 2</Link>
11  </Layout>
12)

The output should be the same as the result of the Gatsby GraphiQL query we created:

1data 💩{
2 "graphCmsData": {
3  "projects": [
4   {
5    "id": "cjoxa812txqoh0932hz0bs345",
6    "status": "PUBLISHED",
7    "title": "Project 1",
8    "description": "Description 1"
9   },
10   {
11    "id": "cjoxa8cctxqqj0932710u39db",
12    "status": "PUBLISHED",
13    "title": "Project 2",
14    "description": "Description 2"
15   },
16   {
17    "id": "cjoxa8pbqxqt309324z9bcddv",
18    "status": "PUBLISHED",
19    "title": "Project 3",
20    "description": "Description 3"
21   },
22   {
23    "id": "cjoxa959vxqvz0932g1jn5ss3",
24    "status": "PUBLISHED",
25    "title": "Project 4",
26    "description": "Description 4"
27   }
28  ]
29 }
30}