728x90

Query 구현 - Code

Query : 데이터 조회
Mutation : 데이터 추가, 수정, 삭제

Query 루트 타입

type Query {
    teams: [Team]
}
  • 자료요청에 사용될 쿼리들을 정의
  • 쿼리 명령문마다 반환될 데이터 형태를 지정

Type

type Team {
    id: Int
    manager: String
    office: String
    extension_number: String
    mascot: String
    cleaning_duty: String
    project: String
}
  • 반환될 데이터의 형태를 지정
  • 자료형을 가진 필드들로 구성

Resolver

const resolvers = {
  Query: {
    teams: () => database.teams
  }
}
  • Query란 object의 항목들로 데이터를 반환하는 함수 선언
  • 실제 프로젝트에서는 MySQL 조회 코드 등..

Mutation 구현 - Code

Equipment 데이터 추가하기

Mutation - 추가 루트 타입

type Mutation {
    insertEquipment(
        id: String,
        used_by: String,
        count: Int,
        new_or_used: String
    ): Equipment
    ...
}

Resolver

Mutation: {
    insertEquipment: (parent, args, context, info) => {
        database.equipments.push(args)
        return args
    },
    //...
}
  • SQL의 INSERT 문 등으로 구현

Test

mutation {
  insertEquipment (
    id: "laptop",
    used_by: "developer",
    count: 17,
    new_or_used: "new"
  ) {
    id
    used_by
    count
    new_or_used
  }
}

Equipment 데이터 수정하기

Mutation - 수정 루트 타입

type Mutation {
    editEquipment(
        id: String,
        used_by: String,
        count: Int,
        new_or_used: String
    ): 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]
    },
    // ...
}
  • SQL의 UPDATE 문 등으로 구현

Test

mutation {
  editEquipment (
    id: "pen tablet",
    new_or_used: "new",
    count: 30,
    used_by: "designer"
  ) {
    id
    new_or_used
    count
    used_by
  }
}

Equipment 데이터 삭제하기

Mutation - 삭제 루트 타입

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

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 문 등으로 구현

Test

mutation {
  deleteEquipment(id: "notebook") {
    id
    used_by
    count
    new_or_used
  }
}

Reference

https://www.yalco.kr/@graphql-apollo/2-2/
https://www.yalco.kr/@graphql-apollo/2-3/

728x90

'GraphQL' 카테고리의 다른 글

[GraphQL] Apollo 서버 구축  (0) 2022.12.26
[GraphQL] GraphQL & Apollo  (0) 2022.12.26
[GraphQL] REST API 한계와 GraphQL 사용 이유  (0) 2022.12.26
728x90

Apollo 서버 구축

npm i graphql apollo-server

# ApolloServer
# - typeDef와 resolver를 인자로 받아 서버 생성

# typeDef
# - GraphQL 명세에서 사용될 데이터, 요청의 타입 지정
# - gql(template literal tag)로 생성

# resolver
# - 서비스의 액션들을 함수로 지정
# - 요청에 따라 데이터를 반환, 입력, 수정, 삭제

설치

npm i graphql apollo-server

Code

const database = require('./database')
const { ApolloServer, gql } = require('apollo-server')
const typeDefs = gql`
  type Query {
    teams: [Team]
  }
  type Team {
    id: Int
    manager: String
    office: String
    extension_number: String
    mascot: String
    cleaning_duty: String
    project: String
  }
`
const resolvers = {
  Query: {
    teams: () => database.teams
  }
}
const server = new ApolloServer({ typeDefs, resolvers })
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`)
})

ApolloServer

  • typeDef와 resolver를 인자로 받아 서버 생성

typeDef

  • GraphQL 명세에서 사용될 데이터, 요청의 타입 지정
  • gql(template literal tag)로 생성

resolver

  • 서비스의 액션들을 함수로 지정
  • 요청에 따라 데이터를 반환, 입력, 수정, 삭제
npm start

쿼리 테스트

query {
  teams {
    id
    manager
    office
    extension_number
    mascot
    cleaning_duty
    project
  }
}

Reference

https://www.yalco.kr/@graphql-apollo/2-1/

728x90

'GraphQL' 카테고리의 다른 글

[GraphQL] Query & Mutation  (0) 2022.12.26
[GraphQL] GraphQL & Apollo  (0) 2022.12.26
[GraphQL] REST API 한계와 GraphQL 사용 이유  (0) 2022.12.26
728x90

GraphQL

GraphQL의 장점

1. 필요한 정보들만 선택하여 받아올 수 있음
    - Overfetching 문제 해결
    - 데이터 전송량 감소

2. 여러 계층의 정보들을 한 번에 받아올 수 있음
    - Underfetching 문제 해결
    - 요청 횟수 감소

3. 하나의 endpoint에서 모든 요청을 처리
    - 하나의 URI에서 POST로 모든 요청 관리

실습 - Code

환경 설정

# 프로젝트 모듈 설치
npm i

# 프로젝트 실행 명령어 (해당 프로젝트 폴더에서)
nodemon index.js
# 브라우저에서 localhost:4000 으로 확인

팀 정보 받아오기

query {
  teams {
    id
    manager
    office
    extension_number
    mascot
    cleaning_duty
    project
  }
}

필요한 정보만 받아오기

query {
  teams {
    manager
    office
  }
}
query {
  team(id: 1) {
    manager
    office
  }
}

팀 정보와 해당 팀 멤버들의 정보들 받아오기

query {
  team(id: 1) {
    manager
    office
    members {
      first_name
      last_name
    }
  }
}

새 팀 추가

mutation {
  postTeam (input: {
    manager: "John Smith"
    office: "104B"
    extension_number: "#9982"
    mascot: "Dragon"
    cleaning_duty: "Monday"
    project: "Lordaeron"
  }) {
    manager
    office
    extension_number
    mascot
    cleaning_duty
    project
  }
}

특정 번호의 팀 정보 수정

mutation {
  editTeam(id: 2, input: {
    manager: "Maruchi Han"
    office: "105A"
    extension_number: "2315"
    mascot: "Direwolf"
    cleaning_duty: "Wednesday"
    project: "Haemosu"
  }) {
    id,
    manager,
    office,
    extension_number,
    mascot,
    cleaning_duty,
    project
  }
}

특정 번호의 팀 삭제

mutation {
  deleteTeam(id: 3) {
    id,
    manager,
    office,
    extension_number,
    mascot,
    cleaning_duty,
    project
  }
}

Apollo

- GraphQL은 단순한 형식이기 때문에 정보 제공 및 처리를 위한 솔루션 필요

- 다양한 솔루션이 존재하지만 Apollo의 경우 백엔드와 프론트엔드 모두 기능이 제공되고 간단하기 때문에 사용

Reference

https://www.yalco.kr/@graphql-apollo/1-3/
https://www.yalco.kr/@graphql-apollo/1-4/

728x90

'GraphQL' 카테고리의 다른 글

[GraphQL] Query & Mutation  (0) 2022.12.26
[GraphQL] Apollo 서버 구축  (0) 2022.12.26
[GraphQL] REST API 한계와 GraphQL 사용 이유  (0) 2022.12.26
728x90

REST API

  • 소프트웨어 간 정보를 주고받는 방식
    • GraphQL 이전부터 사용
    • GraphQL은 '다른' 방식 - 용도와 작업특성에 따라 적합한 것을 사용하기 위해

Data

[
  {
    name: '30분짜장',
    category: 'chinese',
    tel: '##-####-####',
    rating: 4.6
  },
  {
    name: '피자파자마',
    category: 'italian',
    tel: '##-####-####',
    rating: 3.9
  },
  {
    name: '공중떡볶이',
    category: 'snack',
    tel: '##-####-####',
    rating: 4.9
  },
  ///...
]
  • REST API는 데이터를 주고받을 주체들간 약속된 형식
    • URI 형식(어떤 정보를) + 요청 방식(어떻게 할 것인가)요청 형식용도
      GET 조회
      POST 생성
      PUT/PATCH 수정
      DELETE 삭제

실습 - Code

환경 설정

# nodemon 설치
npm install -g nodemon

# 프로젝트 모듈 설치
npm i

# 프로젝트 실행 명령어
nodemon index.js
# 브라우저에서 localhost:3000 으로 확인

API 리스트

  1. 팀(들), 팀원 목록 받아오기요청 형식URI
    GET localhost:3000/api/team
    GET localhost:3000/api/team/{id 번호}
    GET localhost:3000/api/people
    GET localhost:3000/api/people?{변수}={값}&{변수}={값} ...
    GET localhost:3000/api/team/{id 번호}/people
  2. 팀 추가하기요청 형식URI
    POST localhost:3000/api/team
  3. 팀 수정하기요청 형식URI
    PUT localhost:3000/api/team/{id 번호}
  4. 팀 삭제하기요청 형식URI
    DELETE localhost:3000/api/team/{id 번호}

REST API의 한계

Case 1. 각 팀의 매니저와 오피스 호수만 필요할 때 - Overfetching

[
  {
    "manager": "Mandy Warren",
    "office": "101A",
  },
  {
    "manager": "Stewart Grant",
    "office": "101B",
  },
  {
    "manager": "Smantha Wheatly",
    "office": "102A",
  },
  // ...
]
  • 필요한 정보만 받아올 수 없음

Case 2. 특정 팀의 매니저와 팀원들 명단이 필요할 때 - Underfetching

{
  "manager": "Mandy Warren",
  "members": [
    {
      "first_name": "Nathan",
      "last-name": "Jenkins"
    },
    {
      "first_name": "Isabella",
      "last-name": "Martin"
    },
    {
      "first_name": "Kate",
      "last_name": "Owen"
    },
    //...
  ]
}
  • 필요한 정보들을 요청 한 번에 받아올 수 없음

REST API의 한계와 GraphQL의 사용 이유

: Overfetching과 Underfetching을 해결하기 위해

Reference

https://www.yalco.kr/@graphql-apollo/1-2/

728x90

'GraphQL' 카테고리의 다른 글

[GraphQL] Query & Mutation  (0) 2022.12.26
[GraphQL] Apollo 서버 구축  (0) 2022.12.26
[GraphQL] GraphQL & Apollo  (0) 2022.12.26

+ Recent posts