Utiliser une query GraphQL
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:genDescription 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.