GraphQL - mutacja

W tym rozdziale nauczymy się zapytań o mutacje w GraphQL.

Zapytania mutacyjne modyfikują dane w składnicy danych i zwracają wartość. Można go używać do wstawiania, aktualizowania lub usuwania danych. Mutacje są definiowane jako część schematu.

Składnia zapytania o mutację jest podana poniżej -

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

Ilustracja

Pozwól nam zrozumieć, jak dodać nowy rekord ucznia do magazynu danych za pomocą zapytania mutacji.

Krok 1 - Pobierz i zainstaluj wymagane zależności dla projektu

Utwórz folder projektu o nazwie mutation-app. Zmień katalog na mutation-app z terminala. Wykonaj kroki od 3 do 5 opisane w rozdziale Konfiguracja środowiska.

Krok 2 - Utwórz plik schema.graphql

Dodaj schema.graphql file w folderze projektu mutation-app i dodaj następujący kod -

type Query {
   greeting:String
}

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

Zauważ, że funkcja createStudent zwraca typ String. Jest to unikalny identyfikator (ID), który jest generowany po utworzeniu ucznia.

Krok 3 - Utwórz plik resolver.js

Utwórz plik resolvers.js w folderze projektu i dodaj następujący kod -

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}

Funkcja mutacji wskazuje na kolekcję uczniów w magazynie danych. Aby dodać nowego ucznia , wywołaj metodę create w kolekcji uczniów. Obiekt args będzie zawierał parametry przekazane w zapytaniu. Metoda tworzenia kolekcji uczniów zwróci identyfikator nowo utworzonego obiektu studenta.

Krok 4 - Uruchom aplikację

Stwórz server.jsplik. Zobacz krok 8 w rozdziale Konfiguracja środowiska. Wykonaj polecenie npm start w terminalu. Serwer będzie działał na porcie 9000. Tutaj używamy GraphiQL jako klienta do testowania aplikacji.

Następnym krokiem jest otwarcie przeglądarki i wpisanie adresu URL http://localhost:9000/graphiql. Wpisz następujące zapytanie w edytorze -

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

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

Powyższe zapytanie utworzy obiekt studenta w pliku student.json. Zapytanie zwróci unikalny identyfikator. Odpowiedź na zapytanie jest taka, jak pokazano poniżej -

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

Aby sprawdzić, czy obiekt studenta został utworzony, możemy użyć zapytania studentById. Możesz także otworzyć plik Students.json z folderu danych, aby zweryfikować identyfikator.

Aby użyć zapytania studentById, edytuj plik schema.graphql jak podano poniżej -

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

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

Edytuj plik resolver.js plik jak podano poniżej -

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}

Poniżej podano zapytanie o uzyskanie ucznia na podstawie unikalnego identyfikatora zwróconego z zapytania mutacji -

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

Odpowiedź z serwera jest następująca -

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

Zwracanie obiektu w mutacji

Najlepszą praktyką jest zwrócenie obiektu w mutacji. Na przykład aplikacja kliencka chce pobrać dane dotyczące studentów i uczelni. W takim przypadku, zamiast wysyłać dwa różne żądania, możemy utworzyć zapytanie zwracające obiekt zawierający dane studentów i ich uczelni.

Krok 1 - Edytuj plik schematu

Dodaj nową metodę o nazwie addStudent która zwraca obiekt w typie mutacji schema.graphql.

Dowiedzmy się, jak uzyskać dostęp do szczegółów uczelni poprzez dane studentów. Dodaj typ uczelni w pliku schematu.

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
}

Krok 2 - Zaktualizuj plik resolvers.js

Zaktualizuj plik resolvers.js w folderze projektu i dodaj następujący kod -

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}

Krok 3 - Uruchom serwer i wpisz zapytanie w GraphiQL

Następnie uruchomimy serwer i zażądamy zapytania w GraphiQL z następującym kodem -

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

Powyższe zapytanie dodaje nowego ucznia i pobiera obiekt studenta wraz z obiektem uczelni. Oszczędza to wycieczki w obie strony do serwera.

Odpowiedź jest taka, jak podano poniżej -

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