Kimsora✨
article thumbnail
Published 2022. 12. 1. 18:47
GraphQL HTTP 네트워크
320x100
반응형

GraphQL

 페이스북에서 만든 오픈 소스로 제공된 어플리케이션 레이어 쿼리 언어

SQL이 데이터베이스 시스템으로부터 데이터를 가져오는 목적을 가진다면, GraphQL은 클라이언트가 데이터를 서버로부터 가져오는 것을 목적으로 한다.

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

하나의 엔드포인트

REST API는 보통 여러 엔드포인트를 가지며 각각의 엔드포인트가 동일한 응답을 반환한다. 하지만 GraphQL은 보통 하나의 엔드포인트을 사용하며 요청하는 쿼리에 따라 다른 응답을 반환하는 방식이다.

 

원하는 응답 값만 받을 수 있다

엔드포인트에 따라 정해진 응답 값만 받아올 수 있는 REST API와 달리 GraphQL은 쿼리 작성을 통해 필요한 데이터만 골라 받아올 수 있다

 

장점

  • /graphql 이라는 하나의 endpoint 로 요청을 받고 그 요청에 따라 query , mutation을 resolver 함수로 전달해서 요청에 응답한다. 모든 클라이언트 요청은 POST 메소드를 사용한다.
  • 하나의 endpoint에서 쿼리를 이용해 원하는 데이터 여러개를 API에 요청하고 응답으로 받을 수 있다.
  • graphql 서버를 실행하면 POSTMAN 과 유사한 playground라는 GUI를 이용해 resolver 와 schema 를 한 눈에 보고 테스트 해 볼 수 있다.
schema (스키마)
데이터베이스에서 자료의 구조, 자료의 표현 방법, 자료 간의 관계를 형식 언어로 정의한 구조이다.데이터베이스 관리 시스템(DBMS)이 주어진 설정에 따라 데이터베이스 스키마를 생성하며, 데이터베이스 사용자가 자료를 저장, 조회, 삭제, 변경할 때 DBMS는 자신이 생성한 데이터베이스 스키마를 참조하여 명령을 수행한다.

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

단점

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

 

REST API에서 GET 요청을 사용하여 데이터를 수정하지 않고, POST 혹은 PUT 요청을 사용하는 것처럼  GraphQL은 mutation이라는 키워드를 사용하여 서버 측 데이터를 수정한다

mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commentary
  }
}

스키마의 가장 기본적인 구성 요소는 서비스에서 가져올 수 있는 객체의 종류, 그리고 포함하는 필드를 나타내는 객체 유형 이다

type Character {
  name: String!
  appearsIn: [Episode!]!
}
  • Character는 GraphQL 객체 타입이며, 즉 필드가 있는 타입임을 의미한다 스키마에 있는 대부분의 타입은 객체 타입이다
  • name 과 appearIn 은 Character 타입의 필드 이다  name 과 appearIn 은 GraphQL 쿼리의 Character 타입 어디서든 사용할 수 있는 필드이다
  • String은 내장된 스칼라 타입 중 하나 이며 단일 스칼라 객체로 확인되는 유형이며 쿼리에서 하위 선택을 가질 수 없다. 스칼라 타입에는 ID, Int도 있다.
  • !가 붙는다면 이 필드는 nullable하지 않고 반드시 값이 들어온다는 의미하며 ! 붙여 쿼리한다면 반드시 값을 받을 수 있을 것이란 예상을 할 수 있다.
  • [ ]는 배열을 의미하고 배열에도 !가 붙을 수 있다.  ! 이 뒤에 붙어 있어 null 값을 허용하지 않으므로 항상 0개 이상의 요소를 포함한 배열을 기대할 수 있게된다

요청에 대한 응답을 결정해주는 함수로써  Query, Mutation, Subscription과 같은 타입의 실제 일하는 방식 즉 로직을 작성한다.

스키마를 정의하면 그 스키마 필드에 사용되는 함수의 실제 행동을 Resolver에서 정의하고 이러한 함수들이 모여 있기 때문에 보통 Resolvers라 부른다

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

'HTTP 네트워크' 카테고리의 다른 글

웹소켓 io를 통한 간단한 채팅방 구현  (7) 2023.10.08
REST API  (0) 2022.10.06
웹 애플리케이션 아키텍처  (0) 2022.10.05
profile

Kimsora✨

@sorarar

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그

WH