[graphQL] rest API와 차이점, Apollo Server로 맛보기

Rest API

• Micro service간의 상호호환이 가능하도록 정의한 CRUD 프로토콜
• https://reqres.in/ 에서 테스트 데이터용 명세를 확인할 수있음

Graph Query Language

• 페이스북에서 제작
• 모든 API가 그래프처럼 하나로 이뤄져있다.
• Query Language에 해당하는 데이터만 반환해준다.
• End point는 하나만 정의되어있다.(단일성)

Rest API의 단점

• Rest API는 API 요청을 위해서 End point(url)을 가지고 API call을 생성해서 호출한다.
• 이 방식은 오버패칭(과도한 데이터를 로딩)의 문제점을 지닐 수 밖에 없다.
  • 글목록을 조회하려하면 글쓴 회원정보들의 정보도 같이 가지고 오게 된다던지 등
• 이 방식은 또한 언더패칭(부족한 조회)의 문제도 존재한다.
  • 게시글 내용을 조회 했더니 게시글의 사진의 저장주소는 안나와서 다시 API 요청을 보여야 하는 경우등
• 백엔드와 프론트엔드가 나뉘어져있다면 UI요구사항이 늘어날때마다 end Point가 계속 늘어나는데, 여기에 버젼이 나뉠경우 버젼관리가 매우 힘들다.
• 기존의 API의 End point가 삭제될 경우 기존의 사용자가 문제가 발생된다.

설치

• npm i body-parser apollo-server-express graphql-tools

apollo-server-express 2버젼대 문법 변경

• 기존 블로그나 강의같은데서 보고 만든 소스로는 에러가 나서 공식 API 보니깐 문법이 많이 바뀌었다.
• 바뀐 문법이 1버젼보다 더 직관적이고, Json 파싱하려고 썻던 bodyParser가 필요없어졌다.
• https://www.apollographql.com/docs/apollo-server/migration-two-dot/

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

const PORT = 8000;
const app = express();

// 데이터타입 뒤의 !는 required filed를 의미 -> 무조건 존재해야함
const typeDefs = gql`
  type Lang {
    id: Int,
    name: String! 
  }
  type Query {
    getLangs(name: String): [Lang]
  }
`

// 실제로 보여질 데이터 정의
const langs = [{
  id: 0,
  name: 'Node'
}, {
  id: 1,
  name: 'Pythton'
}]

// Promise의 resolver처럼 실행 결과를 반환하는 메서드
const resolvers = {
  Query: {
    getLangs: () => langs
  }
}

// ApolloServer를 만들어서 타입과 리졸버를 넘겨주고 express를 미들웨어로 연결하는 스타일로 변경됨
const server = new ApolloServer({ typeDefs, resolvers });
server.applyMiddleware({ app });
app.listen({port: PORT}, () => console.log(`Server ready at http://localhost:${PORT}${server.graphqlPath}`));

로컬서버 띄우고 접속하면 반환결과 확인 가능한 UI가 웹으로 뜬다