/ STUDY

GraphQL 영화 API 만들기 (1) - 개념 그리고 시작하기

목차

GraphQL의 차이

GraphQL은 기존의 REST API의 Over-fetching 그리고 Under-fetching을 해결할 수 있기 때문에 사용한다.

Over-fetching

원하는 데이터를 가져오려고 하면 큰 데이터 집합에서 가져와야 한다. 근데 이렇게 되면서 불필요한 데이터들도 가져오게 되는 경우를 Over-fetching이라고 한다.

Under-fetching

하나의 기능을 구현하는데 필요한 데이터들이 여러개 있을 경우가 있다. 이런 경우에 여러개의 End-Point에게 요청을 해야하는 경우를 Under-fetching이라고 한다.

시작하기

초반 설정

  1. 1. yarn init
  2. 2. git add remote origin ~
  3. 3. git pull origin main
  4. 4. yarn add graphql-yoga
  5. 5. yarn global add nodemon

Package.json 설정하기

"scripts": {
    "start": "nodemon --exec babel-node index.js"
  }

파일 설치

yarn add babel-node --dev
yarn global add babel-cli
yarn add babel-cli babel-preset-env babel-preset-stage-3 --dev

파일 추가

“.balbelrc”

{
"presets": ["env", "stage-3"]
}

“index.js”

import { GraphQLServer } from "graphql-yoga";

const server = new GraphQLServer({});

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

“graphql/schema.graphql”

편하게 데이터들의 검문소라고 생각하면 된다.

type Query {
  name: String!
}

“graphql/resolver.js”

데이터가 찰흙이라고 한다면, resolver는 찰흙 놀이라고 생각하면 된다. 데이터를 가지고 어떤 것을 할지 입력하는 곳이다.

const resolvers = {
  Query: {
    name: () => "nicolas",
  },
};

export default resolvers;

시작하기

yarn start 입력 후, http://localhost:4000/ 접속하면 GraphQL Playground에 접속할 수 있다.

여기까지가 초반 GraphQL 세팅하는 과정이다.