34f143827c
* 5 new integrations * More integrations Signed-off-by: Maxime Castres <mcastres@student.42.fr> * AUpdate Nuxt.js --amend --signoff * Add 11ty Signed-off-by: Maxime Castres <mcastres@student.42.fr> * Correction after soupette's review * Correct python file * Alex review * Alex review 2: replace console.error to log
5.4 KiB
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.
:::: tabs
::: tab yarn
yarn strapi install graphql
:::
::: tab npm
npm run strapi install graphql
:::
::: tab strapi
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)
:::: tabs
::: tab React
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>
);
}
:::
::: tab Vue.js
<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
:::: tabs
::: tab React
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>
);
}
:::
::: tab Vue.js
<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.