GraphQL 2021

  • https://slides.com/woongjae/graphql2021
  • https://github.com/xid-mark/graphql2021

Lead Software Engineer @ProtoPie

Microsoft MVP

TypeScript Korea User Group Organizer

Marktube (Youtube)

Mark Lee

이 웅재

1. GraphQL Server 만들기

1-1) Rest API 와 GraphQL

1-2) Apollo 를 이용해서 Node.js 서버 만들기

1-3) typeDef 와 resolver

1-4) 여러개의 데이터 조회하기

1-5) 특정 데이터 조회하기

1-6) 데이터 추가하기

1-7) 데이터 변경, 삭제하기

Rest API 와 GraphQL

// 책 목록보기

axios.get(
  'https://api.marktube.tv/v1/book',
  { headers: `Bearer ${token}` },
);
// 책 추가하기

axios.post(
  'https://api.marktube.tv/v1/book',
  {
    title,
    message,
    author,
    url,
  },
  { headers: `Bearer ${token}` },
);
// 책 상세보기

axios.get(
  `https://api.marktube.tv/v1/book/${book.id}`,
  { headers: `Bearer ${token}` },
);
// 책 수정하기

axios.patch(
  `https://api.marktube.tv/v1/book/${book.id}`,
  {
    title,
    message,
    author,
    url,
  },
  { headers: `Bearer ${token}` },
);
// 책 삭제하기

axios.delete(
  `https://api.marktube.tv/v1/book/${book.id}`,
  { headers: `Bearer ${token}` },
);

Apollo 를 이용해서 Node.js 서버 만들기

typeDef 와 resolver

typeDef(s)

  • GraphQL Schema 를 정의하는 곳

    • ​Object

    • Query

    • Mutation

    • Input

  • gql 과 Tagged Template Literals 로 작성한다.

resolver(s)

  • Schema 에 해당하는 구현을 하는 곳​

  • 요청을 받아 데이터를 조회, 수정, 삭제

여러개의 데이터 조회하기

여러개의 데이터 조회하기

특정 데이터 조회하기

데이터 추가하기

데이터 변경, 삭제하기

모듈로 분할하기

GraphQL 문법 정리하기

2. React 에서 GraphQL 사용하기