[GraphQL] Apollo Server로 GraphQL API 서버 만들기 (2)

Apollo Server 구축

NPM에서 필요한 패키지를 설치해주자

yarn add applo-server graphql

 

 

이것이 Apollo Server Document에 서술되어있는 기본 구조이다.

typeDefs에 스키마를 선언하고, Resolvers에 행동 액션을 명세한다.

const { ApolloServer, gql } = require('apollo-server');

// The GraphQL schema
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// A map of functions which return data for the schema.
const resolvers = {
  Query: {
    hello: () => 'world',
  },
};

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

server.listen(3001).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

다음과 같은 서버에서 hello() 쿼리를 요청하면 world가 Response로 오게 된다.

게시글 조회 API

import { ApolloServer, gql } from 'apollo-server'

const typeDefs = gql`
  type BoardModel { # Output의 타입선언
    number: Int
    writer: String
    title: String
    contents: String
  }
  type Query { 
    fetchBoards: [BoardModel] # => 배열 안에 객체 하나 이상을 의미
  }

`;

let boardDB= [
  {number: 1, writer: "철수", title: "제목1임", contents: "내용임"},
  {number: 2, writer: "유리", title: "제목2임", contents: "내용임"},
  {number: 3, writer: "훈이", title: "제목3임", contents: "내용임"},
  {number: 4, writer: "맹구", title: "제목4임", contents: "내용임"},
] 

// A map of functions which return data for the schema.
const resolvers = {
  Query: {
    fetchBoards: () => {
      const result = boardDB;   //DB 썼다고 가정
      return result;
    }
  },
};



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

server.listen(3001).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

야매로 데이터베이스를 썼다고 가정하고, 게시글 조회하는 API를 만들었다. 

fetchBoards라는 API를 만들면서 스키마에 반환 타입을 명시해 주었으며,

세부 타입 필드들을 BoardModel이라는 타입을 만들어 선언해주었다. 

스키마 정의와 함께 Resolver도 짜주어야 하는데 이곳에는 액션을 넣어주면 된다. BoardModel[]을 응답해주게 짰다.

 

게시글 작성 API

import { ApolloServer, gql } from 'apollo-server'

const typeDefs = gql`
  type BoardModel { # Output의 타입선언
    number: Int
    writer: String
    title: String
    contents: String
  }
  type ResponseModel {
    success: Boolean
    message: String
  }
  input BoardInputModel { #Input의 타입선언
    writer: String, 
    title: String, 
    contents: String
  }
  type Query { 
    fetchBoards: [BoardModel] # => 배열 안에 객체 하나 이상을 의미
  }
  type Mutation {
    createBoard(boardInput: BoardInputModel): ResponseModel
  }
`;

let boardDB= [
  {number: 1, writer: "철수", title: "제목1임", contents: "내용임"},
  {number: 2, writer: "유리", title: "제목2임", contents: "내용임"},
  {number: 3, writer: "훈이", title: "제목3임", contents: "내용임"},
  {number: 4, writer: "맹구", title: "제목4임", contents: "내용임"},
] 

// A map of functions which return data for the schema.
const resolvers = {
  Query: {
    fetchBoards: () => {
      const result = boardDB;   //DB 썼다고 가정
      return result;
    }
  },
  Mutation: {
    createBoard: (parent, args, context, info) => {
      //context: requset, response 정보
      //args: 파라미터 => args.writer, args.title...
      //API to API => createBoard({writer: 철수, title: 제목...})을 호출하면 parent에 인자가 담겨옴

      //1. 데이터 등록(DB에서 데이터 저장하기 가정)
      const data = args.boardInput;
      if(data.writer && data.title && data.contents){
          const object = {
              number: boardDB.length + 1,
              ...data
          }
          boardDB.push(object)
          //임의로 등록 했다고 가정

          //2. 결과 응답하기
          return {
            success: true,
            message: '등록성공'
          }
      }
      else{
        return {
          success: false,
          message: '등록실패'
        }
      }
    }
  }
};



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

server.listen(3001).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

마찬가지로 Mutation으로 게시글을 작성하는 createBoards API도 만들었다. 스키마에 타입을 명시해주었으며, Input parameter의 타입은 type이 아닌 input으로 스키마를 정의해주어야 한다.

그리고 리졸버도 작성해주는데 아까 작성한 Input은 파라미터 중 args에 담겨서 오게 된다.

다른 API에서 해당 API를 호출하는 경우에 넘겨주는 인자들은 parent에 담겨 오며, Request, Response 정보는 context에 담겨 온다.

 

실행

서버는  3001번 포트에서 돌게 되며 Apollo server는 REST API의 Swagger같은 API 문서와 Postman과 같은 테스트 도구를 제공한다. 

 

fetchBoards 결과

createBoard 결과