Skip to main content

Getting Started with GraphQL

Caution

The content of this page has not been updated to Strapi v5 yet.

This integration guide follows the Quick Start Guide and assumes you have you have fully completed the "Hands-on" path. 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>
);
}