Utiliser une mutation GraphQL

8 min

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:gen

Description 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.