Supprimer des listes avec GraphQL et Vue Apollo : Une approc

Introduction

Lorsque vous développez des applications complexes, il est souvent nécessaire de gérer plusieurs sources de données et de services. L’une des approches consiste à utiliser GraphQL pour créer une API qui offre une vue unifiée sur vos données. Dans ce tutoriel, nous allons explorer comment utiliser Vue Apollo pour interagir avec votre API GraphQL.

Définition du problème

Lorsque vous essayez de supprimer une publication, vous remarquez qu’il ne fonctionne pas comme prévu. Cela est dû au fait que la mutation deleteListing nécessite un argument id spécifique pour la publication à supprimer. Si vous voulez supprimer la première publication dans votre tableau de données, vous devez passer l’ID "001" à la mutation.

Configuration du serveur GraphQL

Avant de poursuivre, assurez-vous que votre serveur GraphQL est configuré correctement. Vous devriez être en mesure de lancer le serveur avec la commande npm run start dans le répertoire vue-apollo/server-graphql/.

Utilisation de Vue Apollo pour interagir avec l’API

Maintenant que notre serveur GraphQL est lancé, nous pouvons passer à l’étape suivante : utiliser Vue Apollo pour interagir avec notre API. Nous allons commencer par créer un client Apollo en utilisant le lien HTTP créé précédemment.

import { createApp } from 'vue';
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
import { DefaultApolloClient } from '@vue/apollo-composable';

const httpLink = createHttpLink({
  uri: 'http://localhost:3000/api',
});

const cache = new InMemoryCache();
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
});

createApp(App)
  .provide(DefaultApolloClient, apolloClient)
  .mount('#app');

Exécution d’une requête GraphQL avec HTTP

La méthode la plus directe pour que votre client application fasse une demande à une API GraphQL est de simplement invoquer une méthode HTTP. Vous pouvez utiliser les méthodes POST ou GET, mais la plupart des clients GraphQL utilisent la méthode POST.

<template>
  <div @click="fetchListings">Cliquez ici pour obtenir les listings !</div>
</template>

<script>
const LISTINGS = `
  query Listings {
    listings {
      id
      title
    }
  }
`;

export default {
  name: "Component",
  setup() {
    const fetchListings = async () => {
      const result = await fetch("/api", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ query: LISTINGS }),
      });
      const data = await result.json();
      console.log(data);
    };
  },
};
</script>

Conclusion

Dans ce tutoriel, nous avons vu comment utiliser Vue Apollo pour interagir avec une API GraphQL. Nous avons également exploré les différentes étapes nécessaires pour configurer le serveur GraphQL et lancer la client application.

Étape suivante : Exécution d’une mutation

Maintenant que vous avez compris les bases de l’utilisation de Vue Apollo, nous allons passer à l’étape suivante : exécuter une mutation. Nous allons voir comment supprimer une publication en utilisant la mutation deleteListing.

Pratique

• Assurez-vous de configurer correctement votre serveur GraphQL avant d’essayer les exemples ci-dessus.
• N’oubliez pas que la méthode POST est utilisée pour exécuter des requêtes et des mutations vers l’API GraphQL.

Piste d’amélioration

• Pour améliorer la sécurité de votre application, assurez-vous de configurer correctement les en-têtes HTTP pour les demandes envoyées à l’API GraphQL.
• Si vous rencontrez des problèmes lors de l’exécution des requêtes ou des mutations, assurez-vous que votre serveur GraphQL est configuré correctement et que le client Apollo est configuré avec la bonne URL du serveur.