Notice
Recent Posts
Recent Comments
Link
«   2026/08   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
Tags
more
Archives
Today
Total
관리 메뉴

나의 개발 일상 기록

[API] GraphQL Query & Mutation 본문

API

[API] GraphQL Query & Mutation

느린 거북이 2021. 7. 10. 13:38

GraphQL Query & Mutation

 

1. GraphQL Query

 

기본적인 schema와 resolver를 구현하고, query들로 정보를 요청합니다.

 

  • Query 루트 타입
type Query {
    teams: [Team]
}

자료요청에 사용될 query들을 정의하며 query 명령문마다 반환될 데이터 형티를 지정 해줍니다.

위의 예시에서 teams는 Type에 명시에 된 Team의 데이터들을 배열형식처럼 담을 수 있습니다.

  • Type
type Team {
    id: Int
    manager: String
    office: String
    extension_number: String
    mascot: String
    cleaning_duty: String
    project: String
}

반환될 데이터의 형태를 지정해주며 자료형을 가진 필드들도 구성됩니다. 예를 들어 데이터베이스의 Table의 컬럼들의 컬럼명과 컬럼타입을 지정해주는 것입니다.

  • Reslover
const resolvers = {
  Query: {
    teams: () => database.teams
  }
}

Query로써 진행하는 작업들이 실질적으로 이루어지는 query들이 기재가 됩니다. 실제 프로젝트에서는 MySQL조회 코드 등 조회의 query의 역할을 하게 됩니다.

 

1) 조건을 주어서 특정 데이터만 조회에 대한 예시

 

args로 주어진 id에 해당하는 데이터만 필터링하여 반환합니다.

Query: {
    team: (parent, args, context, info) => database.teams
        .filter((team) => {
            return team.id === args.id
        })[0]
}

id를 인자로 받아 하나의 데이터를 반환합니다.

type Query {
    team(id: Int): Team
}
query {
  team(id: 1) {
      id
      manager
      office
      extension_number
      mascot
      cleaning_duty
      project
  }
}

 

2) 두개의 Type을 이용하여 데이터 조회에 대한 예시

 

Team 목록을 반환 시 해당하는 supplies를 supplies항목에 추가합니다.

Query: {
    teams: () => database.teams
    .map((team) => {
        team.supplies = database.supplies
        .filter((supply) => {
            return supply.team === team.id
        })
        return team
    })
}
  • Team의 항목들 중 supplies: 다수의 Supply를 반환합니다.
type Team {
    id: Int
    manager: String
    office: String
    extension_number: String
    mascot: String
    cleaning_duty: String
    project: String
    supplies: [Supply]
}
quey{
	teams{
    	id
        manager
        office
        extension_number
        mascot
        cleaning_duty
        project
        supplies{
          id
          team
        }
    }
}

 

* filter : 어떤 함수를 인자로 받아 주체가 되는 배열을 조건대로 걸러주는 역할을 합니다.

* map : 해당 배열을 특정 방식으로 변경하여 반환하는 역할을 합니다.

 

2. GraphQL Mutation

 

Mutation은 정보를 삽입, 수정, 삭제하는 기능을 수행합니다. Rest API도 각 요청방식마다 약속된 역할이 있듯이 query, Mutation 역할차이에도 개발자간의 약속이 있습니다.

 

  • 삭제 Mutation

Mutation - 삭제 루트 타입

type Mutation {
    deleteEquipment(id: String): Equipment
}

 

  • deleteEquipment : 삭제 Mutation을 실행 할 함수의 역할을 합니다.
  • (id : String) : 어떤 인자를 기준으로 할것인지 특정 인자와 데이터타입을 명시합니다.
  • Equipment : 삭제 완료 후 반환값을 지정합니다. true나 false의 boolean형을 반환받기도 하며 특정인자를 반환받을수도 있습니다.

 

삭제 resolver

Mutation: {
      deleteEquipment: (parent, args, context, info) => {
          const deleted = database.equipments
              .filter((equipment) => {
                  return equipment.id === args.id
              })[0]
          database.equipments = database.equipments
              .filter((equipment) => {
                  return equipment.id !== args.id
              })
          return deleted
      }
}
  • 삭제 후 결과값으로 받아올 데이터를 deleted 변수에 저장합니다.
  • 데이터에서 해당 데이터 삭제 후 deleted를 반환합니다.
  • 실제 프로젝트에서는 SQL의 DELETE 문 등으로 구현할 수 잇습니다.
mutation {
  deleteEquipment(id: "notebook") {
    id
    used_by
    count
    new_or_used
  }
}

 

  • 삽입 Mutation

Mutation -  추가 루트 타입

type Mutation {
    insertEquipment(
        id: String,
        used_by: String,
        count: Int,
        new_or_used: String
    ): Equipment
}
  • 추가할 Equipment의 요소 값들을 인자로 받고 추가된 Equipment를 반환

삽입 resolver

Mutation: {
    insertEquipment: (parent, args, context, info) => {
        database.equipments.push(args)
        return args
    }
}
mutation {
  insertEquipment (
    id: "laptop",
    used_by: "developer",
    count: 17,
    new_or_used: "new"
  ) {
    id
    used_by
    count
    new_or_used
  }
}

 

  • 수정 Mutation

Mutation - 수정 루트 타입

type Mutation {
    editEquipment(
        id: String,
        used_by: String,
        count: Int,
        new_or_used: String
    ): Equipment
}
  • 수정할 Equipment의 요소 값들을 인자로 받고 추가된 Equipment를 반환

수정 resolver

Mutation: {
    editEquipment: (parent, args, context, info) => {
        return database.equipments.filter((equipment) => {
            return equipment.id === args.id
        }).map((equipment) => {
            Object.assign(equipment, args)
            return equipment
        })[0]
    }
}
mutation {
  editEquipment (
    id: "pen tablet",
    new_or_used: "new",
    count: 30,
    used_by: "designer"
  ) {
    id
    new_or_used
    count
    used_by
  }
}

 

 

 

 

 

 

'API' 카테고리의 다른 글

[API] GraphQL 유니온과 인터페이스  (0) 2021.07.10
[API] GraphQL의 기본 타입들  (0) 2021.07.10
[API] GraphQL 서버 만들기  (0) 2021.07.09
[API] GraphQL & Apllo  (0) 2021.07.09
카카오 지도 OPEN API  (0) 2021.03.05
Comments