Apollo 서버 구축

npm i graphql apollo-server

# ApolloServer
# - typeDef와 resolver를 인자로 받아 서버 생성

# typeDef
# - GraphQL 명세에서 사용될 데이터, 요청의 타입 지정
# - gql(template literal tag)로 생성

# resolver
# - 서비스의 액션들을 함수로 지정
# - 요청에 따라 데이터를 반환, 입력, 수정, 삭제

설치

npm i graphql apollo-server

Code

const database = require('./database')
const { ApolloServer, gql } = require('apollo-server')
const typeDefs = gql`
  type Query {
    teams: [Team]
  }
  type Team {
    id: Int
    manager: String
    office: String
    extension_number: String
    mascot: String
    cleaning_duty: String
    project: String
  }
`
const resolvers = {
  Query: {
    teams: () => database.teams
  }
}
const server = new ApolloServer({ typeDefs, resolvers })
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`)
})

ApolloServer

• typeDef와 resolver를 인자로 받아 서버 생성

typeDef

• GraphQL 명세에서 사용될 데이터, 요청의 타입 지정
• gql(template literal tag)로 생성

resolver

• 서비스의 액션들을 함수로 지정
• 요청에 따라 데이터를 반환, 입력, 수정, 삭제

npm start

쿼리 테스트

query {
  teams {
    id
    manager
    office
    extension_number
    mascot
    cleaning_duty
    project
  }
}

Reference

https://www.yalco.kr/@graphql-apollo/2-1/

GraphQL

GraphQL의 장점

1. 필요한 정보들만 선택하여 받아올 수 있음
    - Overfetching 문제 해결
    - 데이터 전송량 감소

2. 여러 계층의 정보들을 한 번에 받아올 수 있음
    - Underfetching 문제 해결
    - 요청 횟수 감소

3. 하나의 endpoint에서 모든 요청을 처리
    - 하나의 URI에서 POST로 모든 요청 관리

실습 - Code

환경 설정

# 프로젝트 모듈 설치
npm i

# 프로젝트 실행 명령어 (해당 프로젝트 폴더에서)
nodemon index.js
# 브라우저에서 localhost:4000 으로 확인

팀 정보 받아오기

query {
  teams {
    id
    manager
    office
    extension_number
    mascot
    cleaning_duty
    project
  }
}

필요한 정보만 받아오기

query {
  teams {
    manager
    office
  }
}

query {
  team(id: 1) {
    manager
    office
  }
}

팀 정보와 해당 팀 멤버들의 정보들 받아오기

query {
  team(id: 1) {
    manager
    office
    members {
      first_name
      last_name
    }
  }
}

새 팀 추가

mutation {
  postTeam (input: {
    manager: "John Smith"
    office: "104B"
    extension_number: "#9982"
    mascot: "Dragon"
    cleaning_duty: "Monday"
    project: "Lordaeron"
  }) {
    manager
    office
    extension_number
    mascot
    cleaning_duty
    project
  }
}

특정 번호의 팀 정보 수정

mutation {
  editTeam(id: 2, input: {
    manager: "Maruchi Han"
    office: "105A"
    extension_number: "2315"
    mascot: "Direwolf"
    cleaning_duty: "Wednesday"
    project: "Haemosu"
  }) {
    id,
    manager,
    office,
    extension_number,
    mascot,
    cleaning_duty,
    project
  }
}

특정 번호의 팀 삭제

mutation {
  deleteTeam(id: 3) {
    id,
    manager,
    office,
    extension_number,
    mascot,
    cleaning_duty,
    project
  }
}

Apollo

- GraphQL은 단순한 형식이기 때문에 정보 제공 및 처리를 위한 솔루션 필요

- 다양한 솔루션이 존재하지만 Apollo의 경우 백엔드와 프론트엔드 모두 기능이 제공되고 간단하기 때문에 사용

• GraphQL은 단순한 명세, 형식
• 따라서 GraphQL을 구현할 솔루션 필요
  • 백엔드에서 정보를 제공 및 처리
  • 프론트엔드에서 요청 전송
  • GraphQL.js, GraphQL Yoga, AWS Amplify, Relay...
  • 기타 솔루션
• Apollo GraphQL
  • 백엔드와 프론트엔드 모두 제공
  • 간편하고 쉬운 설정
  • 다양한 기능
• Apollo Server를 활용한 백엔드 제작
• Apollo Client와 React를 활용한 프론트엔드 제작

Reference

https://www.yalco.kr/@graphql-apollo/1-3/
https://www.yalco.kr/@graphql-apollo/1-4/