Integrate Gatsby with Strapi

These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

The best Headless CMS for Gatsby

Use Strapi to maintain and manage your Gatsby static site

Blazing fast combination: Strapi is powered by a modern technology stack using Node.js – it's fast. Really fast. Plus, it can deliver your content with GraphQL.

Gatsby automates code-splitting, image optimization, inlining critical styles, lazy-loading, and prefetching resources, and more to ensure your site is fast.

Strapi + Gatsby benefits

Being a static site generator brings a lot of advantages: Performance, security, lower cost of scaling but also an excellent developer experience.

Gatsby brings huge benefits to content creators and developers by helping to solve many of the challenges with the headless approach.

Strapi provides a perfect solution as a source for Gatsby’s static markup generation. Whether building a static site, or a more dynamic app/website Strapi has you covered with its flexibility of content types, plugins, and customization.

Chris, GatsbyJS developer.

Automate builds using Webhooks

Take advantage of the built-in webhook feature that will allow you to automatically build your Gatsby project upon the update of your data.

Instants after you made modifications in Strapi, your new content is live.

Getting Started with Gatsby

Follow the integration guide from our documentation to see how to consume Strapi's Content Type's API from Gatsby. As a Static Site Generator, Gatsby will fetch your content from Strapi at build time. Therefore, you need to configure Gatsby to communicate with your Strapi application using the following CLI command.

1yarn add gatsby-source-strapi

1module.exports = {
2  plugins: [
3    {
4      resolve: "gatsby-source-strapi",
5      options: {
6        apiURL: process.env.STRAPI_API_URL || "http://localhost:1337",
7        accessToken: process.env.STRAPI_TOKEN,
8        collectionTypes: [
9          {
10            singularName: "restaurant",
11            queryParams: {
12              publicationState:
13                process.env.GATSBY_IS_PREVIEW === "true" ? "preview" : "live",
14              populate: {
15                cover: "*",
16                blocks: {
17                  populate: "*",
18                },
19              },
20            },
21          },
22          {
23            singularName: "category
24          }
25        ],
26      },
27    },
28  ],
29}

Here is an example of the GraphQL API query ./src/pages/index.js

1import React from 'react';
2
3import { StaticQuery, graphql } from 'gatsby';
4
5const query = graphql`
6  query {
7    allStrapiRestaurant {
8      edges {
9        node {
10          strapiId
11          name
12          description
13        }
14      }
15    }
16  }
17`;
18
19const IndexPage = () => (
20  <StaticQuery
21    query={query}
22    render={data => (
23      <ul>
24        {data.allStrapiRestaurant.edges.map(restaurant => (
25          <li key={restaurant.node.strapiId}>{restaurant.node.name}</li>
26        ))}
27      </ul>
28    )}
29  />
30);
31
32export default IndexPage;

You can use the Gatsby Source Strapi plugin for pulling documents into Gatsby from a Strapi API.