Logo

Apollo Server를 이용한 초간단 GraphQL 서버 개발

이번 포스팅에서는 Apollo Server를 이용하여 매우 간단하게 GraphQL 서버를 개발해보도록 하겠습니다. 기존에 GraphQL 서버를 한 번도 개발해보신 적인 없으신 분들께 도움이 되었으면 합니다.

프로젝트 생성

원하는 디렉터리(ex. my-server)에 index.js 파일을 생성합니다. 그리고 NPN 초기화 명령어를 실행하면 package.json 파일이 생성됩니다.

$ mkdir my-server
$ cd my-server
$ touch index.js
$ npm init -y
$ ls
index.js          package.json

패키지 설치

Apollo Server를 사용하기 위해서 패키지 두개를 설치합니다.

npm i apollo-server graphql

참고로 apollo-server는 Apollo에서 제공하는 패키지이며, graphql은 Facebook에서 제공하는 패키지입니다.

서버 코드 작성

자, 지금부터 index.js 파일에 서버 코드를 작성해보겠습니다. 먼저 apollo-server 모듈 부터 ApolloServergql를 임포트합니다.

const { ApolloServer, gql } = require("apollo-server");

ApolloServer는 GraphQL 서버 인스턴스를 만들어주는 생성자이고, gql은 자바스크립트로 GraphQL 스키마를 정의하기 위해 사용되는 템플릿 리터럴 태그입니다.

그 다음, typeDefs 변수에 gql을 이용하여 GraphQL 스키마 타입을 정의하고, resolvers 변수에 GraphQL 스키마를 통해 제공할 데이터를 정의하는 함수를 담은 객체를 할당합니다. 최대한 간단한 예제를 위해 String을 응답할 수 있는 ping이라는 쿼리를 정의하고, ping 쿼리 요청이 들어오면 항상 “pong”이라는 문자열을 응답하도록 하였습니다.

const typeDefs = gql`
  type Query {
    ping: String
  }
`;

const resolvers = {
  Query: {
    ping: () => "pong",
  },
};

마지막으로 typeDefsresolversApolloServer 생성자에 넘겨 GraphQL 서버 인스턴스를 생성하고 그 서버를 시작해주는 코드를 작성합니다.

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.listen().then(({ url }) => {
  console.log(`Listening at ${url}`);
});

서버 구동

콘솔에 node . 또는 node index.js를 입력하면 위에서 작성한 GraphQL 서버가 구동되고 콘솔에 Endpoint URL이 출력됩니다.

$ node .
Listening at http://localhost:4000/

서버 테스트 1

콘솔에 다음과 같이 curl 명령어를 통해 GraphQL Endpoint에 ping 쿼리를 서버에 전송하면 응답 결과를 확인할 수 있습니다.

$ curl -X POST "http://localhost:4000/" -H "content-type: application/json" -d '{"query":"{ping}"}'
{"data":{"ping":"pong"}}

서버 테스트 2

Apollo Server는 아무 설정 없이도 Playground라고 하는 웹기반 툴이 제공되어 브라우져에서도 서버 테스트를 할 수가 있습니다. 브라우져에서 http://localhost:4000/를 열고 좌측 섹션에 다음과 같이 GraphQL 쿼리를 입력합니다.

query {
  ping
}

그리고 중간에 실행 버튼을 실행하면 우측 섹션에 다음과 같이 GraphQL 쿼리의 응답 결과가 표시됩니다.

{
  "data": {
    "ping": "pong"
  }
}

마치면서

이상으로 최대한 간단하게 Apollo Server를 이용하여 GraphQL 서버 작성하고 구동하는 방법에 대해서 알아보았습니다. 이번 포스팅에서 자세히 다루지 못한 GraphQL 주요 개념에 들에서는 추후 다른 포스팅를 통해서 다뤄보도록 하겠습니다.