Utiliser une mutation GraphQL
Vue d'ensemble
Pour consommer une mutation GraphQL dans une vue, un hook React dédié pour chaque mutation déclarée dans le fichier de configuration de la vue est généré grùce à la commande views:build.
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 mutation correspondante.
Prérequis
Il est nécessaire que la mutation 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 mutation
Le nom du fichier d'un hook gĂ©nĂ©rĂ© pour une mutation est use<ResolverName>Mutation.js, oĂč ResolverName correspond au nom de la fonction resolver (relative Ă la mutation) 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 :
() => Result- Result : objet contenant lâĂ©tat de l'opĂ©ration et un handler permettant d'exĂ©cuter la mutation.
Propriétés exposées par le hook
Le hook généré expose les propriétés suivantes :
- loading : boolĂ©en indiquant si la query est en cours dâexĂ©cution ;
- called : booléen indiquant si la mutation a été appelée ;
- onFormSubmit : fonction permettant le déclenchement de la mutation ; la signature de cette fonction est (input, done, options) => void :
- input : les variables de la mutation ;
- done : fonction de rappel exécutée une fois la mutation terminée ; elle reçoit en paramÚtres ok, error et data ;
- options : objet décrivant les paramÚtres à passer à la fonction mutate utilisée par onFormSubmit. Les paramÚtres possibles sont ceux acceptés par le hook useMutation de la bibliothÚque Apollo Client.
Exemple dâutilisation dans un composant
Exemple dâutilisation du hook gĂ©nĂ©rĂ© useCreateCustomerMutation dans un composant d'une vue.
import useCreateCustomerMutation from './hooks/useCreateCustomerMutation.js';
const MyView = () => {
const { onFormSubmit, loading } = useCreateCustomerMutation();
const onSubmit = () => {
if (loading) return;
// Call onFormSubmit to trigger the mutation
onFormSubmit(
// Mutation inputs
{ firstName: 'John', lastName: 'Doe' },
// Mutation callback
(ok, error) => {
if (!ok && error != null) {
console.error('error');
return;
}
console.log('done');
}
);
}
return (
<div>
<button onClick={onSubmit}>SUBMIT</button>
</div>
);
};
export default MyView;Dans cet exemple :
- useCreateCustomerMutation expose l'état de la mutation et l'handler onFormSubmit ;
- loading indique si la mutation est en cours d'exécution ;
- onFormSubmit est appelé pour déclencher la mutation avec { firstName: 'John', lastName: 'Doe' } en arguments ;
Résumé
Un hook React est généré pour chaque mutation GraphQL définie dans le fichier de configuration de la vue.
Le hook est créé dans views/<VIEW_ID>/client/hooks et expose :
- loading : état de chargement ;
- called : indique si la mutation a été appelée ;
- onFormSubmit : fonction permettant le déclenchement de la mutation ;
Pour générer les hooks, exécuter la commande npm run views:gen.