Skip to main content

Getting Started with GraphQL

๐Ÿงน Removing integration guides

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 strapi install graphql

Fetch your Restaurant collection typeโ€‹

Use the GraphQL Playground 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 include configuring your client with Apollo for your GraphQL endpoint. Please follow the associated documentation for React or Vue.js.

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

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

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