fastify에서 graphql서버 열기

마식·2021년 5월 31일
0

이번에 프로젝트를 하나 하다가 graphql이 필요할 것 같아서 graphql서버를 구성해야만 했다. 토이프로젝트인데 graphql용 서버를 또 하나 더 만들기에는 좀 그래서, 기존 fastify서버에서 graphql를 구현하기로 하였다.

🚘 graphql을 적용하면서 어려웠던 점

기존 express에서 graphql서버를 구현하는 방식은 쉽다. 단지 apollo-server-express를 통하여 fastify에 graphql서버를 만들기만 해주면 되었다. 그래서 찾아봤더니, apollo-server-fastify가 있어 사용해보기로 하였다

🚫 apollo-server-fastify

apollo-server-fastify 적용 방식은 기존 express와는 별 차이가 없었다. 그리고, 서버도 잘 열리기는 하였다. 그러나, 한가지 문제점이 발생하였다. graphql쿼리 문구를 실행할 수 있는 playground 가 안되는 것이다. 혹시나 해서playground 설정을 활성화 해보았지만, 역시나였다.

이후에 검색을 해보니, apollo-server-fastify 는 fastify버전 1.x.x까지만 지원을 하였고, 이후 버전 2에서는 아얘 먹통이 된것이었다.. (누군가가 PR해주길.. 기다립니다..)

🚀 mercurius

이후, 구글링을 해서 결국 현 fastify버전에 걸맞은 apollo-server 의 대체제로는 mercurius 라는게 있었다. mercurius 적용 방법은 딱히 크게 어렵진 않았다. 아니, apollo-server 와 유사하였다. mercurius 적용법은 아래와 같다

// app.ts

import fastify, { FastifyInstance } from 'fastify'
import mercurius from 'mercurius'

class App {
  private _server: FastifyInstance

  constructor() {
    this._server = fastify()

    this._server.register(mercurius, {
      schema: // schema here,
      graphiql: 'playground',
      context: (req, res) => ({
        req,
        res
      })
    })
  }

}

위와 같이 적용 시키면 된다. 위에서는 schema로 적용을 시켰지만, 기존 apollo-server 와 같이 resolvers 로 적용을 시켜도 된다. 대표적으로 많이 쓰는 다른 설정들은 아래와 같다.

  • schema : graphql 스키마 ( string | string[] )
  • resolvers : graphql resolvers ( Object )
  • graphiql : GraphiQL을 사용할 수 있도록 해준다. 만약에 값이 truegraphiql 이라면, /graphiql 에 라우팅이 되고, playground 라면, GraphqlPlaygroundReact/playground에 라우팅을 해준다. 참고로 false 라면, 사용하지 않는다 ( boolean | string )
  • routes : 기본값은 true 이고, graphql-endpoint는 /graphql 에 해당된다 ( boolean )
  • path : graphql-endpoint를 직접적으로 설정할 수 있다. 기본값은 /graphql 이다. ( string )
  • errorHandler : 기본 에러 핸들러를 변경할 수 있다. 참고로, 만약에 커스텀 핸들러가 이미 설정 되어 있다면, GraphQL Spec에서 표준화된 응답을 반환해야한다 ( Function | boolean )
  • context : 커스텀 grpahql context로 인자가 전단된다. 함수의 인자로는 FastifyRequestFastifyResolver 가 들어간다. (req: FastifyRequest, reply: FastifyResolver) => Object

이후에 추가해줄 것이라면 공식문서를 보는 것도 좋겠다. 그다지 보기 좋게 정리된 편은 아니다.

Mercuris + typescript = 😱

딱히 크게 끔찍하다는 것은 아니다. 하지만, 공식문서에서 말하는 루트대로 한다면 거기서 부터 apollo-server 과 많이 다르다는 것을 느낄 수 있을 것이다. 그래서 내가 typescript와 같이 사용 했던 방법을 소개하겠다.

🍫 type-graphql

딱히 뭐 복잡한 것은 아니다. 그냥 graphql 프레임워크 중 하나인 type-graphql 을 사용하는 것이다. type-graphqlbuildSchema 메서드는 기본적으로 GraphQLSchema 형식을 반환하기 떄문에, Mercuriusschema 옵션에 넣어 사용할 수 있었다.

🐹 결론

솔직히 말해서, 꼭 fastify를 써야하지 않는다면 그냥 express에서 apollo-server-express 를 사용하자.. Mercurius 사용해보니 확실히 복잡하고, 손에 안익은 것 같기도 하다. 공식문서라도 친절했으면.. 그래도 type-graphql 을 쓰니, 그 차이점이라는 것이 확실히 갭이 좁아진 듯한 느낌이 들기는 하다. 불행중 다행일지..

profile
안녕하세요? JavaScript Developer이 되고픈 중2입니다.

0개의 댓글