Express에서 GraphQL 사용하기: express-graphql

 

Express 서버에서 Graphql을 사용하는 방법에 대해 알아봅니다.

 

 

 

1. express-graphql 설치

 

이 글에서는 express 서버에서 graphql을 사용하는 방법에 대해 알아보기로 했습니다. GraphQL을 따로 사용할 수도 있지만 이 경우에 어울리는 패키지가 이미 존재합니다. 

 

다음 명령어를 통해 Graphql과 espress-graphql을 설치합니다.

 

> npm install graphql express-graphql express

 

이제 다음과 같이 코딩한 뒤 직접 접속해 봅시다.

 

const express = require('express');
const graphqlHTTP = require('express-graphql');
const app = express();

app.use('/graphql', graphqlHTTP({
    schema: MyGraphQLSchema,
    graphiql: true
}));

app.get('/', function(req, res){
    res.send('Hello Express!');
});

app.listen(3300, function(){
    console.log("Express server is listening on port 3300.");
});

 

접속이 되시나요? MyGraphQLSchema 때문에 실행이 안된다면 정상입니다. express-graphql 공식 가이드에 따르면 schema 항목에 대해 다음과 같은 설명이 있습니다.

 

schema: A GraphQLSchema instance from GraphQL.js. A schema must be provided.

 

이제 진짜 스키마를 제공하기 위해 직접 작성해 봅시다.

 

 

 

2. Schema 작성 및 사용.

 

이제 GraphQL의 buildSchema를 사용해 스키마를 만들고 사용해 보도록 하겠습니다.

 

다음과 같이 코드를 수정합니다.

 

const express = require('express');
const graphqlHTTP = require('express-graphql');
const { graphql, buildSchema } = require('graphql');
const app = express();

var mySchema = buildSchema(`
  type Query {
    hello: String
  }
`);

app.use('/graphql', graphqlHTTP({
    schema: mySchema,
    graphiql: true,
}));

app.get('/', function(req, res){
    res.send('Hello Express!');
});

app.listen(3300, function(){
    console.log("Express server is listening on port 3300.");
});

 

이제 실행이 되시나요? graphiql 페이지로 이동한 후 직접 쿼리를 날려봅시다

 

 

슬프게도 null이 리턴됩니다. 아직 우리의 작업이 다 끝나지 않았다는 말이죠. 생각해 봅시다. 우리가 지금까지 hello에 어떤 값을 리턴해줘라 라는 코드를 작성한 적이 있나요?

 

이제 hello가 어떤 값을 리턴해야 하는지에 대한 코드를 작성해 보겠습니다. 겸사겸시 다른 스키마도 정의해서 수정해 보도록 합시다.

 

const express = require('express');
const graphqlHTTP = require('express-graphql');
const { graphql, buildSchema } = require('graphql');
const app = express();

var mySchema = buildSchema(`
  type Query {
    hello: String
    users: [User]
  }
  type User{
    email: String
    name: String
  }
`);

var root = { 
    hello: () => 'Hello world!',
    users: () => { 
        return [
            {email: 'A@A.com', name: 'A'},
            {email: 'B@B.com', name: 'B'},
            {email: 'C@C.com', name: 'C'},
        ];
    },
};

app.use('/graphql', graphqlHTTP({
    schema: mySchema,
    graphiql: true,
    rootValue: root,
}));

app.get('/', function(req, res){
    res.send('Hello Express!');
});

app.listen(3300, function(){
    console.log("Express server is listening on port 3300.");
});

 

이제 다시 Graphiql로 이동해 다음 쿼리를 수행해 봅시다.

 

 

 

정상적으로 데이터가 출력되는 것을 확인 할 수 있습니다.