GraphQL 개념 사용법 정리

🤯 Graph Query Language

GraphQL은 Facebook에서 처음으로 개발했고, 오픈 소스로 제공된 쿼리 언어이다.
쿼리(Query)란 데이터베이스나 파일의 내용 중 원하는 내용을 검색하기 위하여 몇 개의 코드(code)나 키(Key)를 기초로 질의하는 것을 말한다.

✅ GraphQL의 특징

• GraphQL은 HTTP를 통해 API 서버로 요청을 보내고 응답을 받는다.
• 응답을 받을 시, 데이터 결과를 JSON 형식으로 받는다.
• GraphQL은 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있다.
• GraphQL은 GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사한다.

❓ schema (스키마)

데이터베이스에서 자료의 구조, 자료의 표현 방법, 자료 간의 관계를 형식 언어로 정의한 구조이다.
데이터베이스 관리 시스템(DBMS)이 주어진 설정에 따라 데이터베이스 스키마를 생성하며, 데이터베이스 사용자가 자료를 저장, 조회, 삭제, 변경할 때 DBMS는 자신이 생성한 데이터베이스 스키마를 참조하여 명령을 수행한다.

❓ resolver (리졸버)
요청에 대한 응답을 결정해주는 함수로써 GraphQL의 여러 가지 타입 중 Query, Mutation, Subscription과 같은 타입의 실제 일하는 방식 즉 로직을 작성한다. 스키마 필드에 사용되는 함수의 실제 행동을 Resolver에서 정의한다.

단점

• 캐싱이 REST보다 훨씬 복잡하다. GraphQL에선 POST 메소드만을 이용해 요청을 보내는데, 각 메소드가 가지는 캐싱을 지원 받을 수 없다.
• 고정된 요청과 응답만 필요할 경우에는 Query 로 인해 요청의 크기가 RESTful API 의 경우보다 더 크다.

장점

• /graphql 이라는 하나의 endpoint 로 요청을 받고 그 요청에 따라 query , mutation을 resolver 함수로 전달해서 요청에 응답한다. 모든 클라이언트 요청은 POST 메소드를 사용한다.
• 하나의 endpoint에서 쿼리를 이용해 원하는 데이터 여러개를 API에 요청하고 응답으로 받을 수 있다.
• graphql 서버를 실행하면 POSTMAN 과 유사한 playground라는 GUI를 이용해 resolver 와 schema 를 한 눈에 보고 테스트 해 볼 수 있다.

💡 사용하기

REST API 의 GET 요청 -> GraphQL에서는 Query를 이용해 원하는 데이터를 요청한다.
Create, Delete와 같이 저장된 데이터를 수정하는 경우 -> Mutation을 이용해 요청한다.
구독(Subscription)이라는 개념을 제공하며 이를 이용해 실시간 업데이트를 구현할 수 있다.

Query: 저장된 데이터 가져오기
Mutation: 저장된 데이터 수정하기

• Create: 새로운 데이터 생성
  Update: 기존의 데이터 수정
  Delete: 기존의 데이터 삭제

Subscription: 특정 이벤트가 발생 시 서버가 대응하는 데이터를 실시간으로 클라이언트에게 전송

// 원하는 데이터 설정후 요청 코드 
query HeroNameAndFriends {
  human(id: "1000") {
    name
    height
  }
}

// 결과
{
  "data": {
    "human": {
      "name": "Luke Skywalker",
      "height": 1.72
    }
  }
}

필드 이름을 중복해서 사용할 수 없다. 필드 이름을 중복으로 사용해서 쿼리를 해야 할 때는 별명을 붙여서 쿼리를 한다.

query HeroNameAndFriends {
  empireHero: hero(episode: EMPIRE) {
    name
  }
  jediHero: hero(episode: JEDI) {
    name
  }
}

//결과
{
  "data": {
    "empireHero": {
      "name": "Luke Skywalker"
    },
    "jediHero": {
      "name": "R2-D2"
    }
  }
}