GraphQL 사용법 알아보기

2017년 04월 01일


서버 준비하기

GraphQL은 다양한 언어와 프레임워크로 구현돼있기 때문에 익숙한 구현을 골라 개발할 수 있습니다.

이 강좌에서는 apollo-server-express라는 GraphQL 서버의 구현을 사용합니다.

개발에 필요한 의존성을 다음과 같이 준비합니다.

yarn add express apollo-server-express body-parser graphql graphql-tools

서버 구성하기

우선 기본적인 서버의 뼈대를 작성합니다. 이 부분은 보일러 플레이트에 해당하는 부분으로 별로 중요하지 않습니다.

index.js

const express = require('express');
const bodyParser = require('body-parser');
const { graphqlExpress } = require('apollo-server-express');
const schema = require('./schema');
const app = express();

app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));
app.listen(7777, () => console.log("Hello GraphQL!"));

다음은 실제 GraphQL의 로직이 들어갈 코드입니다.

typeDefs에 문자열을 넘겨 GraphQL 코드를 작성합니다. 자바스크립트 안에 다른 언어가 섞여있는 것이 어색할 수 있습니다. 강좌의 뒷부분에서 별도의 파일로 분리하는 방법에 대해 알아봅니다.

schema.js

const { makeExecutableSchema } = require('graphql-tools');

const Query = { };
const resolvers = { Query };
const typeDefs = `
  type Query { }
`;

module.exports = makeExecutableSchema({ typeDefs, resolvers });

typeDefs에 있는 Query는 GraphQL 서버에서 사용할 모든 쿼리를 명시하고, 자바스크립트 Query 객체는 실제 쿼리를 실행시킬 로직(resolover)을 명시합니다. 여러개의 로직(resolover)를 하나로 묶어 resolvers를 만들고 typeDefs와 resolvers로 서버에서 실행할 스키마를 작성합니다.

기본적인 준비는 끝났습니다. 이제 다음과 같이 데이터를 제공할 수 있습니다.

schema.js

const { makeExecutableSchema } = require('graphql-tools');

const Query = { 
  hello(root, args, context) {
    // 변수들에 대해서는 나중에 알아봅니다
    return "Hello";
  },
  async world(root, args, context) {
    // Promise를 반환하거나 async 구문을 사용할 수 있습니다
    return "World";
  }
};
const resolvers = { Query };
const typeDefs = `
  type Query { 
    hello: String!
    world: String!
  }
`;

module.exports = makeExecutableSchema({ typeDefs, resolvers });

GraphiQL 추가하기

작성한 GraphQL 서버가 올바르게 동작하고 있는지 확인할 수단이 필요합니다. /graphql로 엔드포인트를 제공하고 있기 때문에, 이 주소로 요청하는 클라이언트를 작성할 수 있습니다.

하지만 지금은 단순히 동작을 확인하는 것이 목적이기 때문에 클라이언트 대신 개발도구 GraphiQL을 사용합니다. GraphiQL은 GraphQL 서버에서 제공하는 스키마를 확인하거나 직접 쿼리를 작성하고 실행할 수 있는 환경을 제공합니다.

다음과 같이 GraphiQL을 추가할 수 있습니다.

index.js

const express = require('express');
const bodyParser = require('body-parser');
const { graphqlExpress, graphiqlExpress } = require('apollo-server-express');
const schema = require('./schema');
const app = express();

app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));
app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }));
app.listen(7777, () => console.log("Hello GraphQL!"));

이제 브라우저를 실행해 0.0.0.0:7777/graphiql 로 접속해봅시다.

올바르게 GraphiQL 화면이 나온다면, 오른쪽의 Docs를 눌러 스키마를 확인하거나, 왼쪽의 입력란에 직접 쿼리를 작성하고 실행할 수 있습니다.

다음과 같은 쿼리를 작성하고 올바르게 실행되는지 확인합니다.

{
  hello
  world
}

제대로 동작한다면 다음과 같은 결과를 얻을 수 있습니다.

{
  "data": {
    "hello": "Hello",
    "world": "World"
  }
}