Premiers pas avec React et GraphQL

Découvrez comment démarrer avec GraphQL et l’outil React Query dans React, une bibliothèque largement adoptée pour créer des interfaces utilisateur qui se combinent bien avec les API GraphQL.

GraphQL est un langage de requête permettant d’envoyer des requêtes aux API. Avec GraphQL, le client indique au serveur exactement ce dont il a besoin et le serveur répond avec les données demandées. Dans un article précédent, nous avons réalisé un exercice pour créer un API du serveur GraphQL avec Apollo Server dans Node.js.

Dans l’article d’aujourd’hui, nous passerons un peu de temps à voir comment commencer à utiliser GraphQL sur le client et nous utiliserons React, une bibliothèque largement adoptée pour créer des interfaces utilisateur qui se marient bien avec GraphQL.

Client GraphQL

Dans le domaine de GraphQL, le client sert de support par lequel nous interagissons avec notre serveur GraphQL. En plus d’envoyer des requêtes/mutations et de recevoir des réponses du serveur, le client est également responsable de la gestion du cache, de l’optimisation des requêtes et de la mise à jour de l’interface utilisateur.

Bien que nous puissions faire une requête HTTP GraphQL avec un simple Commande POSTl’utilisation d’une bibliothèque client GraphQL spécialisée peut rendre l’expérience de développement beaucoup plus facile en fournissant des fonctionnalités et des optimisations telles que la mise en cache, la synchronisation des données, la gestion des erreurs, etc.

De nombreux clients GraphQL populaires existent aujourd’hui dans l’écosystème des développeurs, tels que Client Apollon, URQL, Relais et Réagir à la requête. Dans cet article, nous utiliserons React Query comme bibliothèque client GraphQL.

Commencer

En supposant que nous ayons une application React en cours d’exécution, nous pouvons commencer par installer le @tanstack/react-query, graphql-request et le graphql paquets.

npm install @tanstack/react-query graphql-request graphql

@tanstack/react-query est la bibliothèque React Query que nous utiliserons pour effectuer des requêtes et des mutations. Le graphql-request et graphql les bibliothèques nous permettront d’effectuer nos fonctions de requête sur notre serveur GraphQL et de fournir les utilitaires nécessaires pour analyser nos requêtes GraphQL.

Pour commencer à utiliser les utilitaires React Query dans notre application, nous devons d’abord configurer un QueryClient et enveloppez le composant racine de notre application dans un QueryClientProvider. Cela permettra à tous les composants enfants de App pour accéder au QueryClient instance et, par conséquent, pouvoir utiliser les hooks et les fonctionnalités de React Query.

Dans notre fichier d’index racine où le parent <App /> Le composant est en cours de rendu, nous allons importer QueryClient et QueryClientProvider du tanstack/react-query bibliothèque.

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

QueryClient est responsable de l’exécution des requêtes et de la gestion de leurs résultats et de leur état, tandis que QueryClientProvider est un fournisseur de contexte React qui nous permet de passer le QueryClient dans notre arborescence de composants.

Nous allons ensuite créer une nouvelle instance de QueryClient et transmettez-le comme valeur du client accessoire de QueryClientProvider que nous envelopperons la racine App composant avec.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App";


const queryClient = new QueryClient();

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);


root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

Faire des requêtes

La principale fonction de composition, fournie par React Query, pour exécuter des requêtes GraphQL est la utiliserRequête fonction.

Le useQuery() hook prend une clé unique et une fonction asynchrone qui résout les données renvoyées par l’API ou génère une erreur. Pour voir cela en action, nous allons tenter d’effectuer une requête GraphQL sur le site accessible au public. API GraphQL de Star Wars.

Nous allons créer un composant nommé App et utiliser le useQuery() accrochez-vous pour récupérer une liste de films du allFilms champ de requête. Tout d’abord, nous allons construire la requête GraphQL comme suit :

import { gql } from "graphql-request";

const allFilms = gql `
  query allFilms($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          id
          title
        }
      }
    }
  }
`;

Le document GraphQL ci-dessus définit une requête nommée allFilmsqui accepte une variable intitulée $first cela limite le nombre de films récupérés depuis l’API.

Dans la fonction composant, nous exploiterons le useQuery() hook pour initialiser la requête GraphQL lors du montage du composant. Nous fournirons une clé unique pour la requête, 'fetchFilms'et une fonction asynchrone qui déclenche une requête vers le point de terminaison GraphQL.

import { gql, request } from "graphql-request";
import { useQuery } from "@tanstack/react-query";

const allFilms = gql `
  ...
`;

const App = () => {
  const { data } = useQuery({
    queryKey: ["fetchFilms"],
    queryFn: async () =>
      request(
        "https://swapi-graphql.netlify.app/.netlify/functions/index",
        allFilms,
        { first: 10 }
      ),
  });
};

Dans l’extrait de code ci-dessus, le useQuery() le crochet est déclenché lorsque le App montages de composants, appelant la requête GraphQL avec la clé et les variables uniques spécifiées.

Gestion des résultats de requête

Le useQuery() hook renvoie un result objet qui contient diverses propriétés qui représentent l’état et le résultat de la requête. En plus de contenir le data récupéré de la requête en cas de succès, le result l’objet contient également isLoading et isError valeurs. isLoading suit l’état de chargement de la demande et isError nous aide à nous avertir lorsqu’une erreur s’est produite lors de la demande.

Avec le isLoading et isError valeurs, nous pouvons demander au composant de restituer différents éléments en fonction de l’état de notre requête GraphQL.

import { gql, request } from "graphql-request";
import { useQuery } from "@tanstack/react-query";

const allFilms = gql `
  query allFilms($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          id
          title
        }
      }
    }
  }
`;

const App = () => {
  const { data, isLoading, isError } = useQuery({
    queryKey: ["fetchFilms"],
    queryFn: async () =>
      request(
        "https://swapi-graphql.netlify.app/.netlify/functions/index",
        allFilms,
        { first: 10 }
      ),
  });

  if (isLoading) {
    return <p>Request is loading!</p>;
  }

  if (isError) {
    return <p>Request has failed :(!</p>;
  }

  return (
    <ul>
      {data.allFilms.edges.map(({ node: { id, title } }) => (
        <li key={id}>
          <h2>{title}</h2>
        </li>
      ))}
    </ul>
  );
};

Lorsque notre requête est en cours, le composant affichera un message de chargement.

Si la demande devait générer une erreur, le composant affichera un message d’erreur.

Enfin, si la requête n’est pas en cours, qu’aucune erreur n’existe et que les données sont disponibles à partir de notre requête, nous demanderons au composant de restituer le résultat final prévu : une liste de films Star Wars extraits de l’API.

Testez ce qui précède dans ce Codesandbox lien.

Déclencher des mutations

React Query fournit un utiliserMutation() fonction pour permettre des mutations à partir des composants React. Contrairement aux requêtes, les mutations sont utilisées pour créer, mettre à jour ou supprimer des données sur le serveur ou pour effectuer d’autres effets secondaires sur le serveur.

Comme le useQuery() fonction, le useMutation() La fonction reçoit une fonction asynchrone qui renvoie une promesse. L’accès public API GraphQL de Star Wars que nous utilisons n’a pas de champs de mutation racine à utiliser, mais nous supposerons une mutation, appelée addFilm existe qui nous permet d’ajouter un nouveau film à la liste des films enregistrés dans notre base de données.

import { gql, request } from "graphql-request";
import { useMutation } from "@tanstack/react-query";

const addFilm = gql`
  mutation addFilm($title: String!, $releaseDate: String!) {
    addFilm(title: $title, releaseDate: $releaseDate) {
      id
      title
      releaseDate
    }
  }
`;

Le addFilm la mutation acceptera title et releaseDate en tant que variables et en cas de succès, renverra le id du film nouvellement créé, avec le title et releaseDate qui ont été transmis.

Dans la fonction composant, nous exploiterons le useMutation() crochet pour aider à déclencher la mutation lorsqu’un bouton est cliqué. Nous appellerons useMutation() et fournissez la fonction asynchrone qui déclenche la demande de mutation GraphQL.

import { gql, request } from "graphql-request";
import { useMutation } from "@tanstack/react-query";

const addFilm = gql`
  ...
`;

const SomeComponent = () => {
  const mutation = useMutation({
    mutationFn: async (newFilm) =>
      request(
        "https://swapi-graphql.netlify.app/.netlify/functions/index",
        addFilm,
        newFilm
      ),
  });
};

Gestion des résultats de mutation

Le useMutation() hook renvoie un mutation objet qui contient des détails sur la demande de mutation (isLoading, isError, etc.). Il contient également un mutate() fonction qui peut être utilisée n’importe où dans notre composant pour déclenchement la mutation.

Nous aurons un bouton pour déclencher le mutate() fonction lorsque vous cliquez dessus. De plus, nous pouvons afficher des messages à l’utilisateur chaque fois que la demande de mutation est en cours ou comporte une erreur.

import { gql, request } from "graphql-request";
import { useMutation } from "@tanstack/react-query";

const addFilm = gql`
  mutation addFilm($title: String!, $releaseDate: String!) {
    addFilm(title: $title, releaseDate: $releaseDate) {
      id
      title
      releaseDate
    }
  }
`;

const SomeComponent = () => {
  const { mutate, isLoading, isError } = useMutation({
    mutationFn: async (newFilm) =>
      request(
        "https://swapi-graphql.netlify.app/.netlify/functions/index",
        addFilm,
        newFilm
      ),
  });

  const onAddFilmClick = () => {
    mutate({
      title: "A New Hope",
      releaseDate: "1977-05-25",
    });
  };

  return (
    <div>
      <button onClick={onAddFilmClick}>Add Film</button>
      {isLoading && <p>Adding film...</p>}
      {isError && <p>Uh oh, something went wrong. Try again shortly!</p>}
    </div>
  );
};

Ceci résume essentiellement les principes fondamentaux du lancement de projets avec React et GraphQL. En utilisant une bibliothèque client GraphQL, nous pouvons exploiter les hooks et les utilitaires pour effectuer efficacement les requêtes et les mutations GraphQL. Les informations récupérées ou manipulées à l’aide de ces requêtes et mutations nous permettent d’afficher divers composants et éléments de l’interface utilisateur, ce qui garantit que l’application répond dynamiquement aux interactions des utilisateurs et aux modifications des données.

Conclure

Dans cet article, nous avons exploré les bases de l’intégration de GraphQL à une application React, en utilisant React Query comme bibliothèque client. Nous avons enveloppé notre candidature dans un QueryClientProvider pour utiliser les fonctionnalités de React Query dans notre arborescence de composants d’application et avons procédé à la création de requêtes et de mutations GraphQL à l’aide du useQuery() et useMutation() crochets, respectivement.

Comprendre les principes de GraphQL et comment il s’intègre à React est important car il peut parfois offrir une alternative plus efficace à REST lorsqu’il s’agit d’API. En tirant parti de bibliothèques telles que React Query, nous pouvons également simplifier considérablement le processus de récupération, de synchronisation et de gestion de l’état des données côté serveur GraphQL dans leurs applications React.

Nous continuerons bientôt à discuter de GraphQL et de React avec quelques articles de suivi. Restez à l’écoute!