GraphQL intro & example code

JUGNMIN LEE·2021년 7월 6일
0

graphql

목록 보기
1/1
post-thumbnail

GraphQL ?

공식문서는 이렇게 나와있다

"GraphQL은 API를 위한 쿼리 언어이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임 입니다."

이게 무슨말일까?

그랩큐엘은 우리가 평상시에 사용하던 API서버에서 엄격하게 정의된 endpoint 들에 데이터를 요청하는 대신에

한번의 요청으로 내가 필요한 데이터들만 뽑아서 가지고 오려할때 사용할 수 있다.

이렇게 되면 백엔드에서의 많은 로직을 프론트엔드로 분산할 수 있으며

프론트엔드와 백엔드간의 기존 협업 방식에 많은 변화를 가져다 줄 수 있게 된다고 한다!

REST vs GraphQL ?

REST API와 GraphQL을 비교하자면 아래와 같다.

  1. REST에서는 Resource에 대한 형태 정의와 데이터 요청 방법이 연결되어 있지만, GraphQL에서는 Resource에 대한 형태 정의와 데이터 요청이 완전히 분리되어 있다.

  2. REST에서는 Resource의 크기와 형태를 서버에서 결정하지만, GraphQL에서는 Resource에 대한 정보만 정의하고, 필요한 크기와 형태는 client단에서 요청 시 결정한다.

  3. REST에서는 URI가 Resource를 나타내고 Method가 작업의 유형을 나타내지만, GraphQL에서는 GraphQL Schema가 Resource를 나타내고 Query, Mutation 타입이 작업의 유형을 나타냅니다.

  4. REST에서는 여러 Resource에 접근하고자 할 때 여러 번의 요청이 필요하지만, GraphQL에서는 한번의 요청에서 여러 Resource에 접근할 수 있습니다.

  5. REST에서 각 요청은 해당 엔드포인트에 정의된 핸들링 함수를 호출하여 작업을 처리하지만, GraphQL에서는 요청 받은 각 필드에 대한 resolver를 호출하여 작업을 처리합니다.

Why Use GraphQL ?

위에서 RestAPI와 GraphQL의 두가지 차이점에 대해 나열해 봤는데 그것에 대한 연장선이다

요번엔 왜 그랩큐엘을 사용할까에 대해 아래와 같이 정리할 수 있다.

그랩큐엘은 크게 두가지를 해결할 수 있다

Over-fetching , Under-fetching

먼저 OF(Over-fetching)은

기존 데이터 통신 방식은 내가 요청한 영역의 정보보다, 더 많은 정보를 서버에서 받게 된다

이러한 문제점을 OF라고 하며 그랩큐엘이 이런 문제를 해결하여 코드를 짤 수 있고

개발자가 어떤 정보를 원하는 지에 대해 통제할 수 있다.


그다음 UF(Under-fetching)은

어떤 하나를 완성하기 위해 다른 요청을 해야할때 발생하게 되는 문제인데

예를들어 인스타그램의 메인페이지를 보고 싶으면 게시글인 피드의 정보와 알람의 정보 그리고 로그인한 유저의 프로필 정보를

받아와야만 해당 앱이 실행이 된다 이게 UF이다 REST에서 하나를 완성하기 위해 많은 소스를 요청하게 되는것 !

이것 또한 GraphQL이 해결할 수 가 있으며 하나의 쿼리에 내가 원하는 정보만 정확하게 받을 수가 있다


아니 GraphQL이 좋은건 알겠는데 그렇다면 내가 필요한 정보들만 뽑아서 어떻게 알려줄 수 있을까?

먼저 알고가야 할 것은 GraphQL에서는 URL은 존재하지 않는다 URL 체계도 없다

하나의 종점만 있을 뿐 ! Query를 사용하며 이것은 DB에 무언가를 요청하고 GraphQL 언어로 내가 원하는 정보를 알려줄 수가 있다


아래의 코드를 보자

query {
  feed {
    comments
    likeNumber
  },
  notifications {
    isRead
  },
  user {
    username
    profilePic
  }
}
// = = = = = = =
{
  feed: [
    {
      comments:1,
      likeNumber:20
    }
  ],
  notifications: [
    {
      isRead: true
    },
    {
      isRead: false
    }
  ],
  user: {
    username: "nico"
    profile: "http:"
  }
}

위의 코드를 보면 절취선을 경계로 위에 부분은 graphQL의 언어인 query고 이걸 graphQL의 Backend에 보내면

이와 같은 요청 정보를 담은 javascript Object를 보내게 된다 그게 바로 아래에 있는 자바스크립트 코드이다

아래에 있는 코드는 아까 graphQL에서 보낸 javasciprt Object이다 내가 요청한 것만 정확하게 보내주게 된다

기존 REST API에서는 어떤 데이터를 조회하거나 추가하는 것과 같은 작업들을 진행할 때에는, 제일 먼저 생각해야할 것이

어떤 엔드포인트로 요청을 보내냐 이었다 왜냐하면 각 엔드포인트는 해당 데이터를 가르키고 있으며

HTTP Method에 따라 어떤 작업을 진행하는지가 달라졌다.

하지만 GraphQL에선 URL이란 개념 자체가 없기에 URL이 해당 데이터를 특정 짓는것에 사용하지 않는다.

GraphQL Schema가 데이터를 특정 지으며, 또한 HTTP Method로 어떤 작업을 진행하게 되는지 구분하지 않고,

Query, Mutation이라는 타입을 사용해 구분하게 된다.


아래의 코드는 GraphQL 공부를 위해 예시적으로 짜놓은 파일과 코드들이다.

index.js

//graphql-yoga로 인해 쉽게 시작할 수 있음 CRA와 같은 거라 생각하면 됨

import { GraphQLServer } from "graphql-yoga";
import resolvers from "./graphql/resolvers";

// schema는 내가 사용자에게 보내거나 사용자로부터 받을 데이터에 대한 설명
const server = new GraphQLServer({
  typeDefs: "graphql/schema.graphql",
  resolvers,
});

server.start(() => console.log("Graphql Server Running"));

db.js

import fetch from "node-fetch";

const API_URL = "https://yts.mx/api/v2/list_movies.json?";

export const getMovies = (limit, rating) => {
  let REQUEST_URL = API_URL;
  if (limit > 0) {
    REQUEST_URL += `limit=${limit}`;
  }
  if (rating > 0) {
    REQUEST_URL += `&minimum_rating=${rating}`;
  }
  return fetch(REQUEST_URL)
    .then((res) => res.json())
    .then((json) => json.data.movies);
};

resolvers.js

import { getMovies } from "./db";

// resolvers는 어떤것이든지 될 수가 있다 다른 API에 갈 수도 있고 DB에 갈 수도 있다
const resolvers = {
  Query: {
    movies: () => getMovies(),
  },
};

export default resolvers;

schema.graphql

type Movie {
  id: Int!
  title: String!
  rating: Float!
  summary: String!
  language: String!
  medium_cover_image: String!
}

type Query {
  movies(limit: Int, rating: Float): [Movie]!
}

위의 로직은 localhost:4000에 접속하게 되면

graphql-yoga라는 CRA와 같이 GraphQL을 쉽게 사용하게 해주는 소스에서 제공하는 playground페이지로 이동이 되는데

해당 페이지에서는 graphql의 스키마와 데이터 추출을 확인 할 수가 있게 된다

그때에 영화 데이터를 graphql로 원하는 소스만 추출할 수 있게 하는 로직이다.


도움받은 글
https://hwasurr.io/api/rest-graphql-differences/
https://github.com/dotansimha/graphql-yoga
https://graphql.org/

profile
Frontend Developer

0개의 댓글