GraphQL - Mutation

Dans ce chapitre, nous allons apprendre les requêtes de mutation dans GraphQL.

Les requêtes de mutation modifient les données dans le magasin de données et renvoie une valeur. Il peut être utilisé pour insérer, mettre à jour ou supprimer des données. Les mutations sont définies comme faisant partie du schéma.

La syntaxe d'une requête de mutation est donnée ci-dessous -

mutation{
   someEditOperation(dataField:"valueOfField"):returnType
}

Illustration

Voyons comment ajouter un nouvel enregistrement étudiant dans la banque de données à l'aide d'une requête de mutation.

Étape 1 - Téléchargez et installez les dépendances requises pour le projet

Créez un dossier de projet sous le nom mutation-app. Changez votre répertoire en mutation-app depuis le terminal. Suivez les étapes 3 à 5 expliquées dans le chapitre Configuration de l'environnement.

Étape 2 - Créez un fichier schema.graphql

Ajouter schema.graphql fichier dans le dossier de projet mutation-app et ajoutez le code suivant -

type Query {
   greeting:String
}

type Mutation {
   createStudent(collegeId:ID,firstName:String,lastName:String):String
}

Notez que la fonction createStudent renvoie un type String. Il s'agit d'un identifiant unique (ID) qui est généré après la création d'un étudiant.

Étape 3 - Créez un fichier resolver.js

Créez un fichier resolvers.js dans le dossier du projet et ajoutez le code suivant -

const db = require('./db')
const Mutation = {
   createStudent:(root,args,context,info) => {
      return db.students.create({collegeId:args.collegeId,
      firstName:args.firstName,
      lastName:args.lastName})
   }
}
const Query = {
   greeting:() => "hello"
}

module.exports = {Query,Mutation}

La fonction de mutation pointe vers la collection des étudiants dans le magasin de données. Pour ajouter un nouvel étudiant , appelez la méthode create dans la collection des étudiants. L' objet args contiendra les paramètres qui sont passés dans la requête. La méthode create de la collection des étudiants renverra l'ID d'un objet étudiant nouvellement créé.

Étape 4 - Exécutez l'application

Créer un server.jsfichier. Reportez-vous à l'étape 8 du chapitre Configuration de l'environnement. Exécutez la commande npm start dans le terminal. Le serveur sera opérationnel sur le port 9000. Ici, nous utilisons GraphiQL comme client pour tester l'application.

L'étape suivante consiste à ouvrir le navigateur et à saisir l'URL http://localhost:9000/graphiql. Tapez la requête suivante dans l'éditeur -

//college Id should be matched with data from colleges.json for easy retrieval

mutation {
   createStudent(collegeId:"col-2",firstName:"Tim",lastName:"George")
}

La requête ci-dessus créera un objet étudiant dans le fichier student.json. La requête renverra un identifiant unique. La réponse de la requête est comme indiqué ci-dessous -

{
   "data": {
      "createStudent": "SkQtxYBUm"
   }
}

Pour vérifier si l'objet étudiant est créé, nous pouvons utiliser la requête studentById. Vous pouvez également ouvrir le fichier student.json à partir du dossier de données pour vérifier l'ID.

Pour utiliser la requête studentById, modifiez le schema.graphql comme indiqué ci-dessous -

type Query {
   studentById(id:ID!):Student
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   collegeId:String
}

Modifier le resolver.js fichier comme indiqué ci-dessous -

const db = require('./db')
const Query = {
   studentById:(root,args,context,info) => {
      return db.students.get(args.id);
   }
}

const Mutation = {
   createStudent:(root,args,context,info) => {
      return db.students.create({collegeId:args.collegeId,
      firstName:args.firstName,
      lastName:args.lastName})
   }
}

module.exports = {Query,Mutation}

Ci-dessous, la requête pour obtenir un étudiant par identifiant unique renvoyé par la requête de mutation -

{
    studentById(id:"SkQtxYBUm") {
    id
    firstName
    lastName
  }
}

La réponse du serveur est la suivante -

{
   "data": {
      "studentById": {
         "id": "SkQtxYBUm",
         "firstName": "Tim",
         "lastName":"George"
      }
   }
}

Renvoyer un objet en mutation

Il est recommandé de renvoyer un objet en mutation. Par exemple, l'application cliente souhaite récupérer les détails des étudiants et des collèges. Dans ce cas, plutôt que de faire deux requêtes différentes, nous pouvons créer une requête qui renvoie un objet contenant les étudiants et leurs détails de collège.

Étape 1 - Modifier le fichier de schéma

Ajouter une nouvelle méthode nommée addStudent qui renvoie un objet de type mutation de schema.graphql.

Apprenons à accéder aux détails du collège via les détails des étudiants. Ajoutez le type d'université dans le fichier de schéma.

type Mutation {
   addStudent_returns_object(collegeId:ID,firstName:String,lastName:String):Student

   createStudent(collegeId:ID,firstName:String,lastName:String):String
}

type College {
   id:ID!
   name:String
   location:String
   rating:Float
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   college:College
}

Étape 2 - Mettez à jour le fichier resolvers.js

Mettre à jour un fichier resolvers.js dans le dossier du projet et ajoutez le code suivant -

const Mutation = {
   createStudent:(root,args,context,info) => {

      return db.students.create({
         collegeId:args.collegeId,
         firstName:args.firstName,
         lastName:args.lastName
      })
   },
   
   // new resolver function
   addStudent_returns_object:(root,args,context,info) => {
      const id = db.students.create({
         collegeId:args.collegeId,
         firstName:args.firstName,
         lastName:args.lastName
      })

      return db.students.get(id)
   }
}

//for each single student object returned,resolver is invoked
const Student = {
   college:(root) => {
      return db.colleges.get(root.collegeId);
   }
}

module.exports = {Query,Student,Mutation}

Étape 3 - Démarrez le serveur et tapez la requête de requête dans GraphiQL

Ensuite, nous allons démarrer le serveur et demander la requête dans GraphiQL avec le code suivant -

mutation {
   addStudent_returns_object(collegeId:"col-101",firstName:"Susan",lastName:"George") {
      id
      firstName
      college{
         id
         name
      }
   }
}

La requête ci-dessus ajoute un nouvel étudiant et récupère l'objet étudiant avec l'objet college. Cela évite les allers-retours vers le serveur.

La réponse est comme donnée ci-dessous -

{
   "data": {
      "addStudent_returns_object": {
         "id": "rklUl08IX",
         "firstName": "Susan",
         "college": {
            "id": "col-101",
            "name": "AMU"
         }
      }
   }
}

↰ Previous page Next page ↱