Utiliser une query GraphQL

8 min

Vue d'ensemble

Pour consommer une query GraphQL dans une vue, un hook React dédié pour chaque query déclarée dans le fichier de configuration de la vue est généré grâce à la commande views:gen.

Ces hooks sont générés dans le dossier views/<VIEW_ID>/client/hooks. Un hook généré encapsule la logique Apollo Client et expose un ensemble de propriétés standard pour gérer l’état et le résultat de sa query correspondante.

Prérequis

Il est nécessaire que la query soit déclarée dans le fichier de configuration YAML de la vue config/views/<VIEW_ID>.yml et que le hook relatif soit généré.

Commande de génération du code de la vue :

npm run views:gen

Description d'un hook de query

Le nom du fichier d'un hook généré pour une query est use<ResolverName>Query.js, où ResolverName correspond au nom de la fonction resolver (relative à la query) déclaré dans le fichier de configuration de la vue.

Signature du hook

La signature d’un hook généré pour une query est :

(args?) => Result

args : objet d’options, identique à celui accepté par le hook useQuery de la librairie Apollo Client (variables, options de cache, etc.) ;

Result : objet contenant l’état et le résultat de la query.

Propriétés exposées par le hook

Le hook généré expose les propriétés suivantes :

error : objet contenant les erreurs GraphQL levées lors de l’exécution de la query ;

loading : booléen indiquant si la query est en cours d’exécution ;

refetch : fonction permettant d’exécuter à nouveau la query ;

<resolverName> : objet contenant le résultat de la query, où <resolverName> correspond au nom de la fonction resolver correspondante.

Exemple : pour une query dont le resolver est getCustomer, le hook expose la propriété getCustomer qui contient la donnée résolue.

Exemple d’utilisation dans un composant

Exemple d’utilisation du hook généré useGetCustomerQuery dans un composant d'une vue.

import useGetCustomerQuery from './hooks/useGetCustomerQuery.js';

const MyView = () => {
  const { getCustomer, loading, error, refetch } = useGetCustomerQuery();

  if (loading) {
    return <p>Loading…</p>;
  }

  if (error) {
    return <p>Une erreur est survenue.</p>;
  }

  return (
    <div>
      <button onClick={() => refetch()}>Recharger</button>

      <div>
        <pre>{JSON.stringify(getCustomer, null, 2)}</pre>
      </div>
    </div>
  );
};

export default MyView;

Dans cet exemple :

useGetCustomerQuery exécute la query getCustomer ;

loading indique si la query est en cours d'exécution ;

error permet de gérer les erreurs ;

refetch relance la query ;

getCustomer contient la réponse de la query.

Résumé

Un hook React est généré pour chaque query GraphQL définie dans le fichier de configuration de la vue.

Le hook est créé dans views/<VIEW_ID>/client/hooks et expose :

error : erreurs de la query ;

loading : état de chargement ;

refetch : fonction pour relancer la query ;

<resolverName> : résultat de la query.

Pour générer les hooks, exécuter la commande npm run views:gen.