GraphQL-돌연변이

이 장에서는 GraphQL의 뮤 테이션 쿼리를 배웁니다.

변형 쿼리는 데이터 저장소의 데이터를 수정하고 값을 반환합니다. 데이터를 삽입, 업데이트 또는 삭제하는 데 사용할 수 있습니다. 돌연변이는 스키마의 일부로 정의됩니다.

돌연변이 쿼리의 구문은 다음과 같습니다.

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

삽화

변형 쿼리를 사용하여 데이터 저장소에 새 학생 레코드를 추가하는 방법을 이해하겠습니다.

1 단계-프로젝트에 필요한 종속성 다운로드 및 설치

Mutation-app이라는 이름으로 프로젝트 폴더를 만듭니다. 터미널에서 디렉토리를 mutate-app으로 변경하십시오. 환경 설정 장에 설명 된 3 ~ 5 단계를 따릅니다.

2 단계-schema.graphql 파일 생성

더하다 schema.graphql 프로젝트 폴더 muti-app에 파일을 추가하고 다음 코드를 추가하십시오.

type Query {
   greeting:String
}

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

createStudent 함수는 문자열 유형을 반환합니다. 학생을 생성 한 후 생성되는 고유 식별자 (ID)입니다.

3 단계-resolver.js 파일 생성

프로젝트 폴더에 파일 resolvers.js를 생성하고 다음 코드를 추가합니다.

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}

변형 함수는 데이터 저장소의 학생 컬렉션을 가리 킵니다. 새 student 를 추가하려면 students 컬렉션에서 create 메서드를 호출합니다. 인수의 개체는 쿼리에 전달되는 매개 변수를 포함합니다. 학생 컬렉션 의 생성 메소드 는 새로 생성 된 학생 객체의 ID를 반환합니다.

4 단계-애플리케이션 실행

만들기 server.js파일. 환경 설정 장의 8 단계를 참조하십시오. 터미널에서 npm start 명령을 실행합니다. 서버는 9000 포트에서 실행됩니다. 여기서는 GraphiQL을 클라이언트로 사용하여 애플리케이션을 테스트합니다.

다음 단계는 브라우저를 열고 URL을 입력하는 것입니다. http://localhost:9000/graphiql. 편집기에 다음 쿼리를 입력하십시오-

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

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

위의 쿼리는 student.json 파일에 학생 객체를 생성합니다. 쿼리는 고유 식별자를 반환합니다. 쿼리의 응답은 다음과 같습니다.

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

학생 객체가 생성되었는지 확인하기 위해 studentById 쿼리를 사용할 수 있습니다. 데이터 폴더에서 students.json 파일을 열어 ID를 확인할 수도 있습니다.

studentById 쿼리를 사용하려면 schema.graphql 아래와 같이-

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

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

편집 resolver.js 아래 주어진 파일-

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}

다음은 돌연변이 쿼리에서 반환 된 고유 ID로 학생을 얻는 쿼리입니다.

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

서버의 응답은 다음과 같습니다.

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

Mutation에서 객체 반환

변이에서 객체를 반환하는 것이 가장 좋습니다. 예를 들어 클라이언트 응용 프로그램은 학생 및 대학 세부 정보를 가져 오려고합니다. 이 경우 두 가지 다른 요청을하는 대신 학생과 대학 세부 정보를 포함하는 객체를 반환하는 쿼리를 만들 수 있습니다.

1 단계-스키마 파일 편집

명명 된 새 메서드 추가 addStudent 돌연변이 유형의 객체를 반환합니다. schema.graphql.

학생 세부 정보를 통해 대학 세부 정보에 액세스하는 방법을 알아 보겠습니다. 스키마 파일에 대학 유형을 추가합니다.

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
}

2 단계-resolvers.js 파일 업데이트

파일 업데이트 resolvers.js 프로젝트 폴더에 다음 코드를 추가하십시오-

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}

3 단계-서버를 시작하고 GraphiQL에 쿼리 요청 입력

다음으로 서버를 시작하고 다음 코드로 GraphiQL에서 쿼리를 요청합니다.

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

위의 쿼리는 새 학생을 추가하고 대학 개체와 함께 학생 개체를 검색합니다. 이렇게하면 서버로의 왕복 시간이 절약됩니다.

응답은 다음과 같습니다.

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