GraphQL - 서버 시작하기 (by. GraphQL-yoga)

REST API의 단점과 GraphQL

• REST API는 URL을 계속해서 입력해야한다는 단점이 있다.
• 여러 엔드포인트에 대해 여러 형태의 쿼리로 데이터를 얻어와야한다.
• URL이 세밀하게 짜여있지 않은 이상 자신이 원하는 데이터 이상의 데이터를 불러와야할 수도 있고, 여러번의 URL에 여러번의 요청을 보내야 할 수도있다. (Over-fetching, Under-fetching)
• 하지만 GraphQL은 이러한 단점을 극복해 단일 엔드 포인트에 단일 쿼리로 모든 데이터를 원하는 만큼 불러올 수 있다.
• movies query 로 여러 영화의 정보를 받아올 수 있다고 하자. 이 때 우리는 영화들의 제목만 필요할 뿐, 다른 것은 필요하지 않다. 이 때 REST API는 어쩔 수없이 모든 정보를 불러오고 이를 수정하여 사용해야 했다. 하지만 GraphQL은 아래의 Query문 작성으로 모든 영화들의 제목만 받아올 수 있는 것이다.

query {
    movies {
        title
    }
}

• 또한 GraphQL Playground라는 강력한 개발자도구를 지원해주기 때문에 편리한 개발이 가능하다.

• REST API가 가져오는 정보를 GraphQL에 넘겨주기만 하면 (REST API로 정보를 가져와 GraphQL문으로 감싸주기만 하면) 이러한 강력한 기능을 그대로 이용할 수 있기에 더욱 더 많이 쓰이고 있다.

---

Graphql-yoga

• Graphql 서버를 쉽게 실행할 수 있도록 도와주는 도구
• express, apollo-server 등의 라이브러리를 기반으로 작동한다.

yarn add graphql-yoga

• 위 커맨드로 설치가 가능하다.

---

서버 시작하기

import { GraphQLServer } from 'graphql-yoga'

const typeDefs = `
  type Query {
    hello(name: String): String!
  }
`

const resolvers = {
  Query: {
    hello: (_, { name }) => `Hello ${name || 'World'}`,
  },
}

const server = new GraphQLServer({ typeDefs, resolvers })
server.start(() => console.log('Server is running on localhost:4000'))

• 해당 코드를 입력해 기본적인 GraphQL 서버를 열 수있다.
• typeDef와 resolvers를 기반으로 서버가 작동한다.
• 반드시 typeDefs를 해주고, resolvers로 명령에 대한 처리를 해주어야 한다.
• typeDefs : 서버로부터 받거나 줄 정보에 대한 타입정보 서술
• resolvers : 어떤 방식으로 서버로부터 정보를 주고 받을지 서술

---

resolvers

const resolvers = {
  Query: {
    movies: () => getMovies(),
    movie: (_, { id }) => getById(id)
  },
  Mutation: {
    addMovie: (_, { name, score }) => addMovie(name, score),
    deleteMovie: (_, { id }) => deleteMovie(id)
  }
};

• resolvers에는 데이터를 어떻게 주고 받을지 서술한다.
• 단순히 데이터를 얻어오는 경우엔 Query문을 작성한다. (위 코드에서 getMovies와 getById 메소드의 내용은 생략했다. 두 메소드는 이름그대로 영화들의 목록 혹은 ID를 기반으로 하나의 영화를 불러오는 메소드이다.)
• 데이터를 추가, 수정, 삭제하는 경우 Mutation문을 작성한다. (마찬가지로 addMovie, deleteMovie 메소드의 내용은 생략했지만 이름 그대로의 역할을 한다)

---

typeDefs

const typeDefs = `
  type Movie {
    id: Int!
    name: String!
    score: Int!
  }

  type Query {
    movies: [Movie]!
    movie(id: Int!): Movie
  }

  type Mutation {
    addMovie(score: Int!, name: String!): Movie!
    deleteMovie(id: Int!): Boolean!
  }
`

• resolvers에서 작성한 Query, Mutation 및 주고받을 데이터의 형식을 정의한다.
• graphql 파일에 따로 내용만 작성 후 아래와 같은 방식으로 연결할 수도 있다.

schema.graphql

type Movie {
  id: Int!
  name: String!
  score: Int!
}

type Query {
  movies: [Movie]!
  movie(id: Int!): Movie
}

type Mutation {
  addMovie(score: Int!, name: String!): Movie!
  deleteMovie(id: Int!): Boolean!
}

index.js

const server = new GraphQLServer({
  typeDefs: "graphql/schema.graphql",
  resolvers
});

• resolvers와 typeDef만 잘 처리하면 기본적인 GraphQL 서버를 만드는 것은 어렵지 않다.