Utilisez GraphQL avec Vue Apollo pour afficher des listes de

Utilisation de GraphQL avec Vue Apollo : Comment effectuer des requêtes et des mutations

Introduction

Dans ce tutoriel, nous allons explorer comment utiliser GraphQL avec la bibliothèque Vue Apollo pour effectuer des requêtes et des mutations. Nous allons voir comment créer des documents GraphQL, comment les intégrer dans nos composants Vue et comment effectuer des opérations CRUD (Création, Lecture, Mise à jour, Suppression) sur notre données.

Création d’un document GraphQL pour récupérer les listes

Pour commencer, nous allons créer un document GraphQL pour récupérer les listes. Nous allons nommer ce document ListingsQuery. Ce document sera utilisé pour effectuer une requête GET sur l’API pour récupérer les listes.

import { gql } from 'graphql-tag';

const ListingsQuery = gql`
  query Listings {
    listings {
      id
      title
      description
    }
  }
`;

export default ListingsQuery;

Utilisation de la fonction useQuery pour effectuer une requête

Maintenant, nous allons utiliser la fonction useQuery fournie par Vue Apollo pour effectuer une requête sur notre API. Cette fonction prend en argument le document GraphQL que nous avons créé précédemment.

import { useQuery } from '@vue/apollo-composable';
import ListingsQuery from './graphql/ListingsQuery';

setup() {
  const { result, loading, error } = useQuery(ListingsQuery);
  // ...
}

Utilisation de la fonction useResult pour récupérer les résultats

La fonction useQuery nous retourne un objet avec trois propriétés : result, loading et error. La propriété result contient les données récupérées de l’API. Nous allons utiliser la fonction useResult fournie par Vue Apollo pour récupérer ces données.

import { useResult } from '@vue/apollo-composable';

setup() {
  const listings = useResult(result);
  // ...
}

Conditionnel rendering

Nous allons maintenant voir comment conditionnellement afficher les éléments en fonction de l’état de la requête. Nous allons utiliser les attributs v-if et v-else-if pour cela.

<template>
  <div v-if="loading">
    <!-- Progress bar -->
  </div>
  <div v-else-if="error">
    <!-- Message d'erreur -->
  </div>
  <div v-else-if="listings && listings.length">
    <!-- Liste des listes -->
  </div>
  <div v-else-if="listings && !listings.length">
    <!-- Message si aucune liste n'est trouvée -->
  </div>
</template>

Utilisation de la fonction useMutation pour effectuer une mutation

Nous allons maintenant voir comment utiliser la fonction useMutation fournie par Vue Apollo pour effectuer une mutation sur notre API. Nous allons créer un document GraphQL pour supprimer une liste.

import { gql } from 'graphql-tag';

const DeleteListingMutation = gql`
  mutation DeleteListing($id: ID!) {
    deleteListing(id: $id) {
      id
    }
  }
`;

export default DeleteListingMutation;

Nous allons ensuite utiliser la fonction useMutation pour effectuer cette mutation.

import { useMutation } from '@vue/apollo-composable';
import DeleteListingMutation from './graphql/DeleteListingMutation';

setup() {
  const { mutate: deleteListing } = useMutation(DeleteListingMutation);
  // ...
}

Conclusion

Dans cet article, nous avons vu comment utiliser GraphQL avec Vue Apollo pour effectuer des requêtes et des mutations. Nous avons créé un document GraphQL pour récupérer les listes, puis utilisation de la fonction useQuery pour effectuer une requête sur notre API. Ensuite, nous avons utilisé la fonction useResult pour récupérer les résultats de la requête. Finalement, nous avons vu comment utiliser la fonction useMutation pour effectuer une mutation sur notre API.

Pour aller plus loin, vous pouvez consulter la documentation officielle de Vue Apollo et GraphQL.