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 사용하기

GraphQL 2021

By Woongjae Lee

Made with Slides.com

GraphQL 2021

그래프큐엘 2021

  • 1,331

More from Woongjae Lee