# Getting Started with Gridsome

This integration guide is following the Quick Start Guide. We assume that you have fully completed its "Hands-on" path, and therefore can consume the API by browsing this url (opens new window).

If you haven't gone through the getting started guide, the way you request a Strapi API with Gridsome (opens new window) remains the same except that you will not fetch the same content.

# Create a Gridsome app

Create a basic Gridsome application using the Gridsome CLI (opens new window).

gridsome create gridsome-app

  
        Copied to clipboard!

# Configure Gridsome

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

yarn add @gridsome/source-strapi

  
        Copied to clipboard!
  • 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`],
      },
    },
  ],
};

  
        Copied to clipboard!

# 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 {
        id
        name
        description
      }
    }
  }
}

  
        Copied to clipboard!

Response

{
  "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]
          }
        }
      ]
    }
  }
}

  
        Copied to clipboard!

# Example

./src/pages/Index.vue

<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>

  
        Copied to clipboard!

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(id: 1) {
    id
    name
    restaurants {
      name
      description
    }
  }
}

  
        Copied to clipboard!

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": {}
}

  
        Copied to clipboard!

# Example

./src/pages/Index.vue

<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>

  
        Copied to clipboard!

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,
        },
      });
    });
  });
};

  
        Copied to clipboard!
  • 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>

  
        Copied to clipboard!

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

Feel free to do the same for your restaurants!

# Starter

# Conclusion

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

Learn more about GraphQL

← Jekyll →