Gatsby

Gatsby is a blazing-fast website framework for React. It allows developers to build React-based websites within minutes.

Strapi CMS

Strapi is an open-source, Node.js based, Headless CMS that saves developers a lot of development time while giving them the freedom to use their favorite tools and frameworks.

Integrate Gatsby with Strapi

Install gatsby-source-strapi package

npm i gatsby-source-strapi

gatsby-config.js file

• add the gatsby config file in the following code

plugins: [
    {
        resolve: `gatsby-source-strapi`,
        options: {
            apiURL: "your strapi server",
            contentTypes: ["restaurant"], //add your collections name
            queryLimit: 1000,
        }
    }
]

Now connect your gatsby website and strapi CMS

• Here is an example of the GraphQL API query

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;

Hope this helps.