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.

1
yarn add gatsby-source-strapi

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React from 'react';

import { StaticQuery, graphql } from 'gatsby';

const query = graphql`
  query {
    allStrapiRestaurant {
      edges {
        node {
          strapiId
          name
          description
        }
      }
    }
  }
`;

const IndexPage = () => (
  <StaticQuery
    query={query}
    render={data => (
      <ul>
        {data.allStrapiRestaurant.edges.map(restaurant => (
          <li key={restaurant.node.strapiId}>{restaurant.node.name}</li>
        ))}
      </ul>
    )}
  />
);

export default IndexPage;

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