상세 컨텐츠

본문 제목

GraphQL API 만들어보기 (1)

카테고리 없음

by 쌩우 2019. 9. 28. 22:50

본문

GraphQL-yoga를 통하여 빠르게 실습을 해 보았다.
먼저 설치부터 하자.

  • npm install graphql-yoga --dev

GraphQL 서버 오픈

스키마 설계에 앞서 서버를 여는 단계는 아주 간단하다.

index.js

import { GraphQLServer } from "graphql-yoga";

const server = new GraphQLServer({});

server.start(() => console.log("GraphQL Server Running"))

만약 import를 사용할 수 없는 상태라면 babel을 이용해본다.

  • npm install babel-node babel-cli babel-preset-env babel-preset-stage-3 --dev

필요한 모듈 설치 후에는 babel에 대한 설정을 해준다.
.babelrc

{
    "presets": ["env", "stage-3"]
}

node로 index.js 파일의 서버를 열 때, --exec babel-node도 함께 실행하기 위하여 package.json의 scripts에 항목을 추가해주자.
package.json

 "scripts": {
    "start": "nodemon --exec babel-node index.js"
  }

여기까지 잘 따라왔다면, npm start 시에 Error: No schema defined를 볼 수 있을 것이다.


스키마 구성

스키마는 사용자로부터 받거나, 사용자에게 보낼 데이터에 대한 설명이다.
스키마를 구성하기 위하여 새로운 파일을 만들고 작성해준다.

  • .graphql : 스키마의 형태에 대한 내용
  • resolvers : database로 query라는 질문을 할 때, 어떻게 해결하게 될 것인지를 정의

간단한 스키마와 그에 대한 resolver를 작성해본다
schema.graphql

// 모든 query의 정의
type Query{
    name: String!
}

resolvers.js

const resolvers = {
    Query: {
        name: () => "sangwoo"
        //여기서는 Query의 name에 대해서 sangwoo라는 문자열을 반환해주는데에 그치고 있다.
    }
}
export default resolvers

index.js

import { GraphQLServer } from "graphql-yoga";
import resolvers from './graphql/resolvers';

// GraphQLServer라는 생성자 함수를 사용, 인자로 객체형태를 받으며 스키마/resolvers를 key/value 세트로 정의해주었다. 
const server = new GraphQLServer({
    typeDefs: "graphql/schema.graphql",
    resolvers: resolvers
});

server.start(() => console.log("GraphQL Server Running"))

위의 파일들을 제대로 작성했다면, GraphQL 서버가 제대로 작동될 것이다!
localhost의 4000 포트가 기본이니 접속해서 확인해보자.
GraphQL Playground가 나오면 성공이다.

댓글 영역