GraphQL - Mutazione

In questo capitolo impareremo le query di mutazione in GraphQL.

Le query di mutazione modificano i dati nell'archivio dati e restituiscono un valore. Può essere utilizzato per inserire, aggiornare o eliminare dati. Le mutazioni sono definite come parte dello schema.

La sintassi di una query di mutazione è fornita di seguito:

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

Illustrazione

Cerchiamo di capire come aggiungere un nuovo record studente nel datastore utilizzando una query di mutazione.

Passaggio 1: scaricare e installare le dipendenze richieste per il progetto

Crea una cartella del progetto con il nome mutazione-app. Cambia la tua directory in mutazione-app dal terminale. Seguire i passaggi da 3 a 5 spiegati nel capitolo Configurazione dell'ambiente.

Passaggio 2: creare un file schema.graphql

Inserisci schema.graphql file nella cartella del progetto mutation-app e aggiungi il seguente codice:

type Query {
   greeting:String
}

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

Notare che la funzione createStudent restituisce un tipo String. Questo è un identificatore univoco (ID) che viene generato dopo la creazione di uno studente.

Passaggio 3: creare un file resolver.js

Crea un file resolvers.js nella cartella del progetto e aggiungi il seguente codice:

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 funzione di mutazione punta alla raccolta degli studenti nel datastore. Per aggiungere un nuovo studente , richiama il metodo create nella raccolta degli studenti. L' oggetto args conterrà i parametri che vengono passati nella query. Il metodo di creazione della raccolta degli studenti restituirà l'id di un oggetto studente appena creato.

Passaggio 4: eseguire l'applicazione

Creare un server.jsfile. Fare riferimento al passaggio 8 nel capitolo Configurazione dell'ambiente. Esegui il comando npm start nel terminale. Il server sarà attivo e funzionante sulla porta 9000. Qui, usiamo GraphiQL come client per testare l'applicazione.

Il prossimo passo è aprire il browser e digitare l'URL http://localhost:9000/graphiql. Digita la seguente query nell'editor:

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

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

La query precedente creerà un oggetto studente nel file student.json. La query restituirà un identificatore univoco. La risposta alla query è come mostrato di seguito:

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

Per verificare se l'oggetto student è stato creato, possiamo utilizzare la query studentById. Puoi anche aprire il file students.json dalla cartella dei dati per verificare l'id.

Per utilizzare la query studentById, modifica il file schema.graphql come indicato di seguito -

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

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

Modifica il file resolver.js file come indicato di seguito -

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}

Di seguito è riportata la query per ottenere lo studente tramite ID univoco restituito dalla query di mutazione -

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

La risposta dal server è la seguente:

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

Restituzione di un oggetto in mutazione

È buona norma restituire un oggetto in mutazione. Ad esempio, l'applicazione client desidera recuperare i dettagli degli studenti e del college. In questo caso, invece di effettuare due richieste diverse, possiamo creare una query che restituisca un oggetto contenente gli studenti ei loro dettagli universitari.

Passaggio 1: modifica del file dello schema

Aggiungi un nuovo metodo denominato addStudent che restituisce l'oggetto nel tipo di mutazione di schema.graphql.

Impariamo come accedere ai dettagli del college attraverso i dettagli degli studenti. Aggiungi il tipo di college nel file dello schema.

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
}

Passaggio 2: aggiorna il file resolvers.js

Aggiorna un file resolvers.js nella cartella del progetto e aggiungi il seguente codice -

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}

Passaggio 3: avviare il server e digitare la query di richiesta in GraphiQL

Successivamente, avvieremo il server e richiederemo la query in GraphiQL con il seguente codice:

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

La query precedente aggiunge un nuovo studente e recupera l'oggetto studente insieme all'oggetto college. Ciò consente di risparmiare round trip al server.

La risposta è la seguente:

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

↰ Previous page Next page ↱