Michael Shin

Software Engineer

Michael Shin

Software Engineer

3. NodeJS에서 Graphql과 playground 환경 설정4 min read

Jul 9, 2019

Index

  1. GraphQL 소개
  2. GraphQL과 REST API 비교
  3. NodeJS에서 Graphql과 playground 환경 설정
  4. Graphql 스키마와 타입
  5. Graphql API 쿼리 구조(query와 mutation)

     

    이번 포스트에서는 NodeJS 서버 프레임워크인 Express로 GraphQL 서버를 만들고 prisma에서 만든 playground까지 설정해 보겠습니다.

    들어가기에 앞서 Node, yarn이 설치되어 있어야 합니다. 다음은 설치를 위한 링크입니다.

    Node: https://nodejs.org/ko/download/

    yarn: https://yarnpkg.com/lang/en/docs/install/

     

    Express GraphQL 서버 설정

    Node와 yarn을 설치하였다면 계속해서 진행하겠습니다.

    1. 폴더 생성
    2. 폴더 안에서 yarn 초기화를 위해 $yarn init 명령 실행 → 기본적인 설정을 물어볼 텐데 연습이므로 모두 엔터키를 입력하여 디폴트로 설정하여도 무관합니다.
    3. GraphQL에 필요한 패키지 설치 $yarn add express express-graphql graphql
    4. .js 파일 생성 하여 밑의 코드를 입력(여기서는 server.js로 파일을 만들었습니다.)
    const express = require("express")
    const graphqlHTTP = require("express-graphql")
    const { buildSchema } = require("graphql")
    const schema = buildSchema(`
      type Query {
        hello: String
      }
    `)
    const root = {
      hello: () => {
        return "Hello world!"
      }
    }
    const app = express()
    app.use(
      "/graphql",
      graphqlHTTP({
        schema: schema,
        rootValue: root,
        graphiql: true
      })
    )
    app.listen(4000)
    console.log("localhost:4000/graphql에서 GraphQL API 서버가 동작중입니다.")

    위의 파일을 저장 후 $node server.js로 실행하면 “localhost:4000/graphql에서 GraphQL API 서버가 동작 중입니다.”를 확인할 수 있습니다.

     

    그럼 위에서 만든 코드를 하나하나 뜯어보도록 하겠습니다.

    const { buildSchema } = require("graphql")
    const schema = buildSchema(`
      type Query {
        hello: String
      }
    `)

    buildSchema는 스키마를 만들기 위해 graphql 패키지에서 제공하는 함수입니다.

    그리고 schema 변수 안에 GraphQL 언어를 이용한 스키마를 넣어 줍니다.

    여기서는 Query라는 이름의 필드를 만들고 hello 객체를 만들었습니다.

     

    const root = {
      hello: () => {
        return "Hello world!"
      }
    }

    root은 각 API 엔드 포인트를 위한 resolver 함수를 제공합니다.

    여기서는 hello 객체를 받았을 때 “Hello world!”를 리턴하도록 만들었습니다.

     

    const express = require("express")
    const graphqlHTTP = require("express-graphql")
    const app = express()
    app.use(
      "/graphql",
      graphqlHTTP({
        schema: schema,
        rootValue: root,
        graphiql: true
      })
    )
    app.listen(4000)

    app.use안에 첫 번째 인자는 graphql 서버의 엔드 포인트가 될 path입니다. graphqlHTTP는 옵션과 함수를 넣기 위한 미들웨어입니다. 그 안에는 위에서 만들었던 schema와 root을 넣고, graphiql를 true로 설정하였습니다.

    그리고 localhost:4000/graphql에 접속해 보겠습니다. 다음과 같이 GraphiQL 화면이 나타납니다.

    GraphiQL은 GraphQL에서 기본 제공하는 통합개발환경(IDE) 입니다. 하지만 앞으로의 진행은 Playground를 사용할 예정입니다.

    Playground는 GraphQL의 컴포넌트를 사용하여 만들어진 IDE입니다. 다음과 같은 기능이 더 추가되어 있습니다.

    • DOCS에 대화식, 멀티 컬럼 스키마 추가
    • 자동 스키마 새로 고침
    • GraphQL subscriptions 지원
    • Query history
    • HTTP header 설정 가능
    • 탭 기능

     

    참고: graphqlHTTP의 기본 구조는 다음과 같습니다.

    graphqlHTTP({
      schema: GraphQLSchema,
      graphiql?: ?boolean,
      rootValue?: ?any,
      context?: ?any,
      pretty?: ?boolean,
      formatError?: ?Function,
      validationRules?: ?Array<any>,
    }): Middleware

     

     

    Playground 설치하기

    Playground를 설치하기 위해서 playground 미들웨어를 설치하도록 하겠습니다.

    $yarn add graphql-playground-middleware-express

    이후 밑의 코드에서 주석으로 추가라고 쓰인 부분을 추가하겠습니다.

    const express = require("express")
    const graphqlHTTP = require("express-graphql")
    const { buildSchema } = require("graphql")
    const expressPlayground = require("graphql-playground-middleware-express")      // 추가
      .default
    const schema = buildSchema(`
      type Query {
        hello: String
      }
    `)
    const root = {
      hello: () => {
        return "Hello world!"
      }
    }
    const app = express()
    app.use(
      "/graphql",
      graphqlHTTP({
        schema: schema,
        rootValue: root,
        graphiql: true
      })
    )
    app.get("/playground", expressPlayground({ endpoint: "/graphql" }))             // 추가
    app.listen(4000)
    console.log("localhost:4000/graphql에서 GraphQL API 서버가 동작중입니다.")

    추가된 코드에는 “/graphql”을 엔드 포인트로 하는 express 용 Playground의 “/playground” path를 설정해 주었습니다.

    const expressPlayground = require("graphql-playground-middleware-express")
      .default
    app.get("/playground", expressPlayground({ endpoint: "/graphql" }))

    다시 node server.js를 실행하여 “localhost:4000/playground”에 접속하면 playground에 들어갈 수 있습니다.

     

     

     

    Playground

    계속해서 GraphQL의 메뉴와 기능에 대해 차근차근 알아보겠습니다.

    GraphQL의 엔드 포인트

    빨간 네모 안에 보이는 건 GraphQL의 엔드 포인트입니다. GraphQL은 하나의 엔드 포인트를 갖는다고 하였는데 우리는 이곳으로 모든 종류의 쿼리를 처리할 수 있습니다.

     

    DOCS

    DOCS에는 query, mutation, subscription이 정리되어 있습니다. DOCS는 SCHEMA 메뉴와 달리 모든 쿼리가 이름별로 정리되어 있어서 쿼리를 테스트하거나 필드, 객체의 타입을 확인할 때 유용하게 사용할 수 있습니다.

    우리가 만든 hello 객체를 확인할 수 있습니다.

     

    SCHEMA

    Schema 메뉴에 작성한 스키마가 그대로 나열되어 있습니다.

     

    쿼리 실행

    이제 쿼리를 작성하여 실행해 보도록 하겠습니다. Playground에는 쿼리, 필드, 객체의 이름에 대해 자동완성 기능을 제공합니다.

    아래와 같이 작성한 후 가운데 버튼을 클릭하여 쿼리를 실행시킬 수 있습니다.

    결과로 “Hello world!”를 받았습니다.

     

    HTTP Headers

    HTTP 헤더에 들어갈 데이터를 넣어 줄 수 있습니다. 예를 들어 쿼리를 처리하기 위해 필요한 인증에 사용하는 토큰을 삽입할 수 있습니다.

     

    설정

    설정 메뉴 안에는 Playground IDE에 대해 설정을 할 수 있습니다.

    {
      'editor.cursorShape': 'line', // 가능한 설정 값: 'line', 'block', 'underline'
      'editor.fontFamily': `'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace`,
      'editor.fontSize': 14,
      'editor.reuseHeaders': true, // 마지막 탭으로 부터 Header 값 재사용
      'editor.theme': 'dark', // 가능한 설정 값: 'dark', 'light'
      'general.betaUpdates': false,
      'prettier.printWidth': 80,
      'prettier.tabWidth': 2,
      'prettier.useTabs': false,
      'request.credentials': 'omit', // 가능한 설정 값: 'omit', 'include', 'same-origin'
      'schema.polling.enable': true, // polling 설정
      'schema.polling.endpointFilter': '*localhost*', // 스키마 polling을 위한 엔드 포인트 필터
      'schema.polling.interval': 2000, // 스키마 polling 시간 간격 설정
      'schema.disableComments': boolean,
      'tracing.hideTracingResponse': true,
    }

     

    GraphQL 예제를 진행하기 위한 Node.js express 서버에 GraphQL과 Playground 환경설정을 하였습니다.

    다음시간부터는 본격적으로 GraphQL API 쿼리 구조(Query와 Mutation)에 대해 알아보도록 하겠습니다.