Gridsome

Integrate Strapi with Gridsome.

Getting Started with Gridsome

This integration guide follows the Quick Start Guide and assumes you have you have fully completed the "Hands-on" path. You should be able to consume the API by browsing the URL http://localhost:1337/api/restaurants.

If you haven't gone through the Quick Start Guide, the way you request a Strapi API with Gridsome remains the same except that you do not fetch the same content.

Create a Gridsome app

Create a basic Gridsome application using the Gridsome CLI.

bash

gridsome create gridsome-app

Configure Gridsome

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

bash

yarn add @gridsome/source-strapi

Add the @gridsome/source-strapi to the plugins section in the gridsome.config.js file:

module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: '@gridsome/source-strapi',
      options: {
        apiURL: `http://localhost:1337`,
        queryLimit: 1000, // Defaults to 100
        contentTypes: [`restaurant`, `category`],
      },
    },
  ],
}

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.

graphql

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

json

{
  "data": {
    "allStrapiRestaurant": {
      "edges": [
        {
          "node": {
            "id": 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.",
            "categories": [1]
          }
        }
      ]
    }
  }
}

Example

./src/pages/Index.vue

jsx

<template>
<Layout>
  <ul>
    <li v-for="restaurant in $page.allStrapiRestaurant.edges" :key="restaurant.node.id">
      {{ restaurant.node.name }}
      <ul>
        <li v-for="category in restaurant.node.categories">
          <g-link :to="'categories/' + category.id">{{ category.name }}</g-link>
        </li>
      </ul>
    </li>
  </ul>
</Layout>
</template>

<page-query>
  query {
      allStrapiRestaurant {
        edges {
          node {
            id
            name
            categories {
              id
              name
            }
          }
        }
      }
    }
</page-query>

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.

graphql

query {
  strapiCategory(id: 1) {
    id
    name
    restaurants {
      name
      description
    }
  }
}

json

{
  "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.vue

jsx

<template>
<Layout>
  <h1>{{ $page.strapiCategory.name }}</h1>
  <ul>
    <li v-for="restaurant in $page.strapiCategory.restaurants" :key="restaurant.id">{{ restaurant.name }}</li>
  </ul>
</Layout>
</template>

<page-query>
  query  {
    strapiCategory(id: 1) {
      id
      name
      restaurants {
        name
        description
      }
    }
  }
</page-query>

We can generate pages for each category.

Tell Gridsome to generate a page for each category by updating the gridsome-server.js file with the following:

module.exports = function (api) {
  api.createPages(async ({ graphql, createPage }) => {
    const { data } = await graphql(`
      {
        allStrapiCategory {
          edges {
            node {
              id
              name
            }
          }
        }
      }
    `)

    const categories = data.allStrapiCategory.edges

    categories.forEach((category) => {
      createPage({
        path: `/categories/${category.node.id}`,
        component: './src/templates/Category.vue',
        context: {
          id: category.node.id,
        },
      })
    })
  })
}

Create a ./src/templates/Category.vue file that will display the content of each one of your category:

<template>
  <Layout>
    <div>
      <h1>{{ $page.category.name }}</h1>
      <ul>
        <li v-for="restaurant in $page.category.restaurants">{{ restaurant.name }}</li>
      </ul>
    </div>
  </Layout>
</template>

<page-query>
  query Category($id: ID!) {
      category: strapiCategory(id: $id) {
        name
        restaurants {
          id
          name
        }
      }
    }
</page-query>

You can find your restaurant categories by browsing http://localhost:8080/categories/<id-of-category>.