Getting Started with GraphQL

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 GraphQL remains the same except that you will not fetch the same content.

Install the GraphQL plugin

Install the graphql plugin in your Strapi project

yarn strapi install graphql

npm run strapi install graphql

strapi install graphql

Fetch your Restaurant collection type

Play with the GraphQL Playground to fetch your content

Request

query Restaurants {
  restaurants {
    id
    name
    description
    categories {
      name
    }
  }
}

Response

{
  "data": {
    "restaurants": [
      {
        "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": [
          {
            "name": "French Food"
          }
        ]
      }
    ]
  }
}

Examples

These examples do not guide you to configure your client with Apollo for your GraphQL endpoint. Please follow the associated documentation for each client (React and Vue.js here)

Using React and Apollo

import { gql, useQuery } from '@apollo/client';

function Restaurants() {
  const { loading, error, data } = useQuery(gql`
    query Restaurants {
      restaurants {
        id
        name
        description
        categories {
          name
        }
      }
    }`);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <ul>
      { data.restaurants.map(restaurant => <li key={restaurant.id}>{restaurant.name}</li>) }
    </ul>
  );
}

Using Vue.js and Apollo

<template>
  <div>
    <ul>
      <li v-for="restaurant in restaurants" :key="restaurant.id">
        {{ restaurant.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import gql from "graphql-tag";

export default {
  data() {
    return {
      restaurants: []
    };
  },
  apollo: {
    restaurants: gql`
      query Restaurants {
        restaurants {
          id
          name
          description
          categories {
            name
          }
        }
      }`
  }
};
</script>

Fetch your Category collection type

Request

query Category {
  category(id: 1) {
    id
    name
    restaurants {
      id
      name
      description
    }
  }
}

Response

{
  "data": {
    "category": {
      "id": "1",
      "name": "French Food",
      "restaurants": [
        {
          "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."
        }
      ]
    }
  }
}

Examples

Using React and Apollo

import { gql, useQuery } from '@apollo/client';

function Category({ id }) {
  const { loading, error, data } = useQuery(gql`
    query Category($id: ID!) {
      category(id: $id) {
        id
        name
        restaurants {
          id
          name
          description
        }
      }
    }`, { variables: { id } });

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      <h1>{ data.category.name }</h1>
      <ul>
        { data.category.restaurants.map(restaurant => <li key={restaurant.id}>{restaurant.name}</li>) }
      </ul>
    </div>
  );
}

Using Vue.js and Apollo

<template>
  <div>
    <h1>{{ category.name }}
    <ul>
      <li v-for="restaurant in category.restaurants" :key="restaurant.id">
        {{ restaurant.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import gql from "graphql-tag";

export default {
  data() {
    return {
      category: {},
      routeParam: this.$route.params.id
    };
  },
  apollo: {
    category: {
      query: gql`
      query Category($id: ID!) {
        category(id: $id) {
          id
          name
          restaurants {
            id
            name
            description
          }
        }
      }
      `,
      variables() {
        return {
          id: this.routeParam
        };
      }
    }
  }
};
</script>

Conclusion

This is how you request your Collection Types in Strapi using GraphQL.

Feel free to explore more about GraphQL