Getting Started with GraphQL

✋ CAUTION

This third-party integration guide might not be up-to-date with Strapi v4. Contributions (opens new window) are most welcome.

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 Quick Start Guide, the way you request a Strapi API with GraphQL (opens new window) remains the same except that you will not fetch the same content.

Install the GraphQL plugin

Install the GraphQL plugin in your Strapi project.

Fetch your Restaurant collection type

Play with the GraphQL Playground (opens new window) to fetch your content.

Example query

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

Example 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 (opens new window). Please follow the associated documentation for each client: (React (opens new window) and Vue.js (opens new window) here)

Using React and Apollo (opens new window)

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 (opens new window)

<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

Example request

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

Example 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 (opens new window)

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 (opens new window)

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