[개발] GraphQL - 관련 Tools

안녕하세요 devport 입니다. 이번 포스팅에서는 GraphQL에서 사용하는 Tools에 대해서 알아보도록 하겠습니다.

Apollo extension for VS Code

Visual Studio Code 에디터를 사용하시는 분들은 Apollo GraphQL Extension을 설치 할 수 있습니다.

확장모듈을 설치하게 된다면 다음과 같은 기능들을 제공하여 줍니다.

• js파일 내부의 gql 템플릿에 대한 Syntax-highlight표시
• 필드, 인자, 유형, 변수 입력시에 intelligent autocomplete가 피드백
• 쿼리 정의와 성능 정보
• 필드 및 인자 사용시 유효성 검사
• 점프 및 미리보기 기능 지원

등의 다양한 기능을 지원 해주기 때문에 VScode 사용자는 사용해보는 것도 나쁘지 않을 것 같습니다.

 

GraphQL Editor

GraphQL Editor는 스키마의 구조 및 관리를 위하여 사용할 수 있는 부분을 브라우저에서 확인할 수 있도록 기능들을 제공하고 있습니다. 새로운 프로젝트를 추가하고 기존의 GraphQL 서버의 graphql을 입력하게되면 스키마 정보를 시각화 및 문서화 하여 보여주게 되어 협업 작업을 도와줄 수 있습니다.

 

GraphQL Voyager

graphql-voyager는 GraphQL을 그래프로 시각화를 제공하는 OpenSource 입니다. 스키마로 구성되어 있는 데이터 모델이 어떤 구조를 이뤄져있는지 좀더 쉽게 파악할 수 있게 되어 있으며 검색 및 관계를 클릭시에 관련 타입을 바로 확인해 볼 수 도 있습니다. 

Graphql express를 통해서 voyager를 실행하게 된다면

$ npm install --save graphql-voyager

관련 의존을 설치합니다.

 

const express = require('express');
const voyagerMiddleware = require('graphql-voyager/middleware');
const { ApolloServer, gql } = require('apollo-server-express');

const typeDefs = gql ...
const resolvers = {...

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

app.use('/voyager', voyagerMiddleware.express({endpointUrl: '/graphql'}));

server.applyMiddleware({ app });

app.listen({port: 4000}, () => console.log('Now browse to localhost:4000/graphql'));

위 서버를 실행하게 되면 http://localhost:4000/voyager로 시각화된 데이터 모델을 확인할 수 있게 됩니다.

 

/grapqhql 엔드포인트 하나만 제공한다면 자동적으로 모델링 해주게 되어 간편하게 구성할 수 있다는 장점을 가지고 있습니다. 하지만 데이터 모델이 방대해진다면... 복잡하게 보이는건 저뿐만일까요? 그래도 없는 것 보단 낫겠습니다!

graphqldoc

graphqldoc은 GraphQL API 서버의 endpoint를 지정하여 주면 간단하게 graphql document 파일들이 생성이 됩니다.

$ graphqldoc -e http://localhost:4000/graphql -o ./doc/graphql

위 커맨드를 실행하면 ./doc/graphql 위치에 파일이 생성이 됩니다.

생성된 도큐먼트 위치에서 node-static을 실행하게 되면 Graphql Schema 정보를 가진 문서를 확인해 보실수 있게 됩니다. GraphQL API 서버에서 Schema를 작성시에 주석만 잘 달아준다면 설명도 같이 포함되어 생성되니 문서 자동화에 조금이라도 도움이 될 것 같습니다.