strapi/docs/v3.x/getting-started/gatsby.md

Getting Started with Gatsby

This integration guide is following the Getting started guide. We assume that you have completed Step 8 and therefore can consume the API by browsing this url.

If you haven't gone through the getting started guide, the way you request a Strapi API with Gatsby remains the same except that you will not fetch the same content.

Create a Gatsby app

Create a basic Gatsby application using the Gatsby CLI.

gatsby new gatsby-app

Configure Gatsby

Gatsby is a Static Site Generator and will fetch your content from Strapi at build time. You need to configure Gatsby to communicate with your Strapi application.

yarn add gatsby-source-strapi

• Add the gatsby-source-strapi to the plugins section in the gatsby-config.js file:

{
  resolve: "gatsby-source-strapi",
  options: {
    apiURL: "http://localhost:1337",
    contentTypes: [
      "restaurant",
      "category",
    ],
    queryLimit: 1000,
  },
},

GET Request your collection type

Execute a GET request on the restaurant Collection Type in order to fetch all your restaurants.

Be sure that you activated the find permission for the restaurant Collection Type

Request

query {
  allStrapiRestaurant {
    edges {
      node {
        strapiId
        name
        description
      }
    }
  }
}

Response

{
  "data": {
    "allStrapiRestaurant": {
      "edges": [
        {
          "node": {
            "strapiId": 1,
            "name": "Biscotte Restaurant",
            "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
          }
        },
      ]
    }
  }
}

Example

./src/pages/index.js

import React from "react"

import { StaticQuery, graphql } from "gatsby"

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

export default IndexPage

Execute a GET request on the category Collection Type in order to fetch a specific category with all the associated restaurants.

Be sure that you activated the findOne permission for the category Collection Type

Request

query  {
  strapiCategory(strapiId: {eq: 1}) {
    strapiId
    name
    restaurants {
      name
      description
    }
  }
}

Response

{
  "data": {
    "strapiCategory": {
      "id": "1",
      "name": "French Food",
      "restaurants": [
        {
          "name": "Biscotte Restaurant",
          "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
        }
      ]
    }
  },
  "extensions": {}
}

Example

./src/pages/index.js

import React from "react"

import { StaticQuery, graphql } from "gatsby"

const IndexPage = () => (
  <StaticQuery
      query={graphql`
        query  {
          strapiCategory(strapiId: {eq: 1}) {
            id
            name
            restaurants {
              id
              name
              description
            }
          }
        }
      `}
      render={data => (
        <div>
          <h1>{ data.strapiCategory.name }</h1>
          <ul>
            { data.strapiCategory.restaurants.map(restaurant => <li key={restaurant.id}>{restaurant.name}</li>) }
          </ul>
        </div>
      )}
    />
)

export default IndexPage

Conclusion

Here is how to request your Collection Types in Strapi using Gatsby.

Learn more about GraphQL