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 모듈 부터 ApolloServer와 gql를 임포트합니다.

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",
  },
};

마지막으로 typeDefs와 resolvers를 ApolloServer 생성자에 넘겨 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 주요 개념에 들에서는 추후 다른 포스팅를 통해서 다뤄보도록 하겠습니다.

This work is licensed under CC BY 4.0

messageCircle