Section 4 - Unit 6 [GraphQL]

정호재·2023년 3월 28일

graphql 코드스테이츠

코드스테이츠

목록 보기

31/37

GraphQL

GraphQL은 Facebook에서 처음으로 개발했으며 오픈 소스로 제공된 쿼리 언어
Graph + Query Language의 줄임말로 Query Language 중에서도 Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를 뜻합니다
요약하면 'API를 위한 쿼리 언어'

GraphQL 특징

GraphQL은 API 서버와 HTTP 통신 가능함
응답을 받을 시, 데이터 결과를 JSON 형식으로 받음
GraphQL은 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회
GraphQL은 GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사

REST API와 다른 GraphQL 동작방식

GraphQL은 Resource에 대한 정보만 정의하고, 필요한 정의와 데이터 요청이 완전 분리됨
자원의 크기와 형태를 클라이언트 단에서 자원 요청시 결정함
Schema가 자원을 나타내고 Query, Mutation 타입이 작업의 유형을 나타냄
한번의 요청을 통해 여러 자원에 접근가능
요청 받은 각 필드에 대한 resolver를 호출해 핸들링 처리를 함

GraphQL의 단점

캐싱 REST보다 많이 복잡
고정된 통신을 할 경우 요청의 크기가 RESTful한 API보다 많이 커짐

GraphQL 구조

Query: 저장된 데이터 가져오기
Mutation: 저장된 데이터 수정하기 (create, update, delete)
subscription: 특정 이벤트 발생 시 서버에서 맞는 데이터를 실시간으로 클라이언트에 제공

쿼리, Query

필드(field)
: 데이터를 가지고 있는 영역으로, 서버는 GraphQL을 통해 클라이언트가 요구하는 필드 정확하게 알고 있어 정확하고 같은 결과를 반환할 수 있음
전달인자(Arguments)
: 조건 같이 사용할 수 있으며, 중첩된 필드와 객체 사이에서 원하는 정보만을 가져올 수 있게 해줌
별명(Aliases)
: 중복된 이름의 필드를 존재할 때 별명을 붙여줘 구분함

{
  hero(episode: EMPIRE) {
    name
  }
  hero(episode: JEDI) {
    name
  }
}

오퍼레이션 네임(Operation name)
: 쿼리에서 원하는 데이터를 한번의 요청으로 가져올 수 있게하며, query mutation, subscription, describes등이 있음(타입에 맞는 이름 작성 중요)
변수(Variables)
: 동적으로 인자를 전달 받아 데이터를 가져오고 싶을 때 변수를 사용하며 인자 변수 옆에 !를 표기할 경우 반드시 해당 변수의 타입 기입한 타입이여야 한다는 뜻

query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}```

### 뮤테이션(mutation, 데이터 수정)
: 서버 데이터 수정 요청
```javascript
mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commentary
  }
}

스키마/타입(Schema/Type)

: 데이터 타입의 집합

type Character { // 객체 타입
  name: String! // string 타입이고 항상 값이 있음
  appearsIn: [Episode!]! // 배열 타입이고 episode는 항상 값을 가지고 배열은 0개 이상의 요소를 가짐
}

리졸버(Resolver)

요청에 대한 응답을 결정해주는 함수로써 GraphQL의 여러 가지 타입 중 Query, Mutation, Subscription과 같은 타입의 실제 일하는 방식 즉 로직

const db = require("./../db")
const resolvers = {
  Query: { // ** 저장된 데이터 가져오기 
		getUser: async (_, { email, pw }) => {
			db.findOne({
				where: { email, pw }
			}) ... // 실제 디비에서 데이터를 가져오는 로직을 작성합니다. 
			...
		}
  },
  Mutation: { // ** 저장된 데이터 수정하기 ( Create , Update , Delete )
		createUser: async (_, { email, pw, name }) => {
			...
		}
  }
  Subscription: { // ** 실시간 업데이트
    newUser: async () => {
      ...
		}
  }
};