GraphQL - Mutasyon

Bu bölümde, GraphQL'deki mutasyon sorgularını öğreneceğiz.

Mutasyon sorguları, veri deposundaki verileri değiştirir ve bir değer döndürür. Veri eklemek, güncellemek veya silmek için kullanılabilir. Mutasyonlar, şemanın bir parçası olarak tanımlanır.

Bir mutasyon sorgusunun sözdizimi aşağıda verilmiştir -

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

İllüstrasyon

Bir mutasyon sorgusu kullanarak veri deposuna yeni öğrenci kaydını nasıl ekleyeceğimizi anlayalım.

Adım 1 - Proje için Gerekli Bağımlılıkları İndirin ve Yükleyin

Mutation-app adıyla bir proje klasörü oluşturun. Dizininizi terminalden mutation-app olarak değiştirin. Ortam Kurulumu bölümünde açıklanan 3 ila 5 arasındaki adımları izleyin.

Adım 2 - Bir schema.graphql Dosyası Oluşturun

Ekle schema.graphql proje klasöründeki mutation-app dosyasını açın ve aşağıdaki kodu ekleyin -

type Query {
   greeting:String
}

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

CreateStudent işlevinin bir String türü döndürdüğünü unutmayın. Bu, bir öğrenci oluşturulduktan sonra oluşturulan benzersiz bir tanımlayıcıdır (ID).

Adım 3 - Bir resolver.js Dosyası oluşturun

Proje klasöründe bir dosya resolvers.js oluşturun ve aşağıdaki kodu ekleyin -

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}

Mutasyon işlevi, veri deposundaki öğrenci koleksiyonuna işaret eder. Yeni bir öğrenci eklemek için öğrenci koleksiyonundaki oluşturma yöntemini çağırın. Args nesne sorguda geçirilen parametreleri içerecektir. Öğrenci koleksiyonunun oluşturma yöntemi, yeni oluşturulan bir öğrenci nesnesinin kimliğini döndürür.

Adım 4 - Uygulamayı Çalıştırın

Oluşturmak server.jsdosya. Ortam Kurulumu Bölümündeki 8. adıma bakın. Terminalde npm start komutunu yürütün. Sunucu, 9000 portunda çalışır durumda olacaktır. Burada, uygulamayı test etmek için bir istemci olarak GraphiQL kullanıyoruz.

Sonraki adım, tarayıcıyı açmak ve URL'yi yazmaktır. http://localhost:9000/graphiql. Düzenleyiciye aşağıdaki sorguyu yazın -

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

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

Yukarıdaki sorgu, student.json dosyasında bir öğrenci nesnesi oluşturacaktır. Sorgu, benzersiz bir tanımlayıcı döndürür. Sorgunun yanıtı aşağıda gösterildiği gibidir -

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

Öğrenci nesnesinin oluşturulup oluşturulmadığını doğrulamak için studentById sorgusunu kullanabiliriz. Kimliği doğrulamak için data klasöründen student.json dosyasını da açabilirsiniz.

StudentById sorgusunu kullanmak için schema.graphql aşağıda verildiği gibi -

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

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

Düzenleyin resolver.js dosya aşağıda verildiği gibi -

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}

Aşağıda, mutasyon sorgusundan döndürülen benzersiz kimliğe göre öğrenci alma sorgusu verilmiştir -

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

Sunucudan gelen yanıt aşağıdaki gibidir -

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

Mutasyonda Bir Nesneyi Geri Döndürmek

Mutasyon halindeki bir nesneyi döndürmek en iyi uygulamadır. Örneğin, istemci uygulaması öğrenci ve üniversite ayrıntılarını almak istiyor. Bu durumda, iki farklı istekte bulunmak yerine, öğrencileri ve üniversite ayrıntılarını içeren bir nesneyi döndüren bir sorgu oluşturabiliriz.

Adım 1 - Şema Dosyasını Düzenleyin

Adlı yeni bir yöntem ekleyin addStudent mutasyon türünde nesneyi döndüren schema.graphql.

Üniversite detaylarına öğrenci detaylarından nasıl erişeceğimizi öğrenelim. Şema dosyasına üniversite türünü ekleyin.

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
}

Adım 2 - resolvers.js Dosyasını güncelleyin

Bir dosyayı güncelleyin resolvers.js proje klasörüne ve aşağıdaki kodu ekleyin -

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}

Adım 3 - Sunucuyu Başlatın ve GraphiQL'de Talep Sorgusunu Yazın

Ardından, sunucuyu başlatacağız ve aşağıdaki kodla GraphiQL'de sorgu talep edeceğiz -

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

Yukarıdaki sorgu, yeni bir öğrenci ekler ve öğrenci nesnesini üniversite nesnesiyle birlikte alır. Bu, sunucuya gidiş dönüşleri kaydeder.

Cevap aşağıda verildiği gibidir -

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