[GraphQL][NodeJS][Express] apollo-server 세팅하기 - NodeJS (apollo-server-express)

아래의 세팅방법은 NodeJS 기준으로 작성되었다. 라이브러리는 apollo-server-express 를 사용한다.

여기서 apollo-server 대신 apollo-server-express를 사용하는 이유는 여러가지가 있는데 가장 큰 이유는 범용성이다.

apollo-server-express는 express 서버에 apollo-server를 미들웨어 형태로 붙인 구조이다. 즉 서버 하나 안에 서버 두개가 존재하는 느낌인데, 이로 인해 문제가 가끔 발생하기도 한다. 하지만 널리 사용되는 express와 REST 방식의 특성상 더 다양한 라이브러리를 사용할 수 있고 추가적인 환경설정이 필요할 때 apollo-server만 가지고는 불충분할 때가 있다. 그럴 때 apollo-server-express를 사용하면 middleware를 적용하거나 express의 라이브러리를 사용하거나 혹은 REST 방식으로 특정 요청을 처리하는 방식으로 해결이 가능하다. 공식문서에서도 두 라이브러리의 차이점을 설명하며 apollo-server에서 apollo-server-express로 갈아타길 권장 한다.

1. API 서버에 'apollo-server-express' Dependency 추가

# npm 사용할 경우
npm i apollo-server-express express graphql

# yarn 사용할 경우
yarn add apollo-server-express express graphql

express 서버에 apollo-server를 연동하는 형태기 때문에 express dependency도 함께 추가하고, apollo-server를 사용하기 위해서는 graphql dependency도 있어야 한다.

2. server.ts 생성

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

const app = express();

/**
 * Apollo server 생성 
 */
const server = new ApolloServer({
  // playground 설정
  playground: true,
  // context 설정에서 return 해주는 값을 resolver에서 사용할 수 있다.
  context: ({ req, res }) => {
    return { req, res };
  },
  formatError: (err) => {
    console.log(err);
    return err;
  }
});

/**
 * Express app에 Apollo 연결 
 */
const con = async() => {
  await server.start();
  server.applyMiddleware({ app, path: "/graphql" });
}
con();

/**
 * application 실행 확인 
 */
app.listen({port: 4000}, () => {
	console.log('Now browse to http://localhost:4000' + server.graphqlPath)
})

가장 기본적인 형태로 구현하면 위와 같다. 제일 먼저 express 서버와 apollo-server 서버를 실행하고 express에 apollo-server를 middleware로 등록한다.

이렇게 하면 세팅이 끝났다. 이제 package.json에 등록한 실행 명령어로 실행해보면

Now browse to http://localhost:4000/graphql

로그가 뜨면서 서버가 실행될 것이다. 이제 서버로 요청을 보내보자.

http://localhost:4000 로 요청을 보내보면 일반적인 Express 서버와 같이

Cannot GET /

응답을 받을 것이다. route를 아무것도 등록안했으니까..

하지만 http://localhost:4000/graphql 로 접속을 하면 이런 화면을 응답받을 것인데 이게 위의 server.ts에서 설정한 playground로, 작성한 resolver들을 사용할 수 있게끔 GUI로 구현된 페이지이다.

이전 GraphQL 포스트에서 작성했던 Documentation이 여기에 노출되어 간편하게 API를 사용할 수 있게 해준다.

---

참조

[GraphQL][React] apollo-client 세팅하기 - React

[GraphQL][Express] CORS 설정하기 - apollo-server-express

[NodeJS] NodeJS란?