Getting Started with GraphQL
The Strapi Documentation team focuses on improving the documentation for Strapi 5's core experience. We will release many changes in the next 6 months, so please keep an eye out ๐.
As a result, the present page is now in maintenance mode only, might not be fully up-to-date with Strapi 5, and will soon be removed from docs.strapi.io and moved to Strapi's integrations page.
In the meantime, we encourage you to read the GraphQL API section, which is already up-to-date with Strapi 5.
This integration guide follows the Quick Start Guide. 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 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
- npm
yarn strapi install graphql
npm run strapi install graphql
Fetch your Restaurant collection typeโ
Use the GraphQL Playground to fetch your content.
query Restaurants {
restaurants {
id
name
description
categories {
name
}
}
}
{
"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 include configuring your client with Apollo for your GraphQL endpoint. Please follow the associated documentation for React or Vue.js.
- React
- Vue.js
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>
);
}
<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โ
query Category {
category(id: 1) {
id
name
restaurants {
id
name
description
}
}
}
{
"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โ
- React
- Vue.js
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>
);
}
<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>