[112]rest에서 graph ql과 relay로 갈아타기 이정우

1. 이정우
에디켓
REST에서
GraphQL과 Relay로
갈아타기

2. 목차
1. REST API - Status Quo & Limitations
2. GraphQL - How it replaces REST
3. Relay - Data fetching and management

3. 1.
REST API

4. 1. REST API 소개
리소스를 URI로 표현
GET, POST, PUT, DELETE 활용
웹 개발 아키텍처

5. 1. REST API 소개
GET /api/users/ 유저 리스트 가져오기
GET /api/users/1/ 유저 1을 가져오기
POST /api/users/ 유저 생성하기
PUT /api/users/1/ 유저 1를 수정하기
DELETE /api/users/1/ 유저1를 삭제하기
예제

6. 1. REST API 현황
GET /api/users/를 했으면 결과 값은 어떻게 돌려줘야하나?
HTTP Response

7. https://api.twitter.com/1.1/lists/me
mbers.json
1. REST API 현황
Twitter 방식
https://dev.twitter.com/rest/reference/get/lists/members

8. https://api.github.com/repos/octocat/Hello-
World/issues/
1. REST API 현황
Github 방식
https://developer.github.com/v3/issues/

9. https://openapi.naver.com/blog/list
Category.json
1. REST API 현황
Naver 방식
https://developers.naver.com/docs/blog/post

10. 1. REST API 현황
사실상 각자 제멋대로…
추가 함수는? POST Response? 필터는? 정렬은? 페이지네이션
은?

11. 1. REST API 현황
그래도 그나마 쓸만한…
http://jsonapi.org/

12. 1. REST API 현황
• Relationship 가져오기? ✓
• 부분 필드만 가져오기? ✓
• 필터 적용방법? ✓
• 정렬하기? ✓
• 페이지네이션? ✓
• POST Response? ✓
• 깃허브에 별 갯수? ✓

13. 1. REST API 한계
필드 제한 (Sparse Fieldset)

14. 모든 필드 전부다 가져와야 하나?
접근 권한이 없는 필드는 가져오지 말아야 하나?
Admin과 일반 유저가 기본적으로 가져오는 필드가 다르나?
1. REST API 한계
필드 제한 (Sparse Fieldset)

15. 1. REST API 한계
유저 1의 모든 필드를 가져오고 싶지만
그가 팔로우하는 유저들의 username, email만 가져오고 싶은데…
결과: 모든 유저의 username과 email을 가져옴
필드 제한 (Sparse Fieldset)

16. 1. REST API 한계
필드 타입

17. 1. REST API 한계
POST /payments/ 를 하니 유저 1의 credit이 변경되었다.
그런데 클라이언트에서 이미 유저 1를 불러왔으며 credit값이 아직 동기화 되지 않
았다.
- POST Response에 만들어진 payment와 같이 변경된 유저도 가져오기?
- GET /users/1/ 로 한번 더 불러오기?
Side Effect

18. 1. REST API 한계
실제사례:
- 요청의 저자, 예약, 예약한 에디터, 교정본, 교정본 에디터, 그리고 교정본 리뷰를
가져오기
- 더불어 각자 필드마다 가져올 수 있는 필드 제한하기
GET /drafts/?
include=author,reservation.editor,revision.editor,revision.review&fields[draft]=cate
gory,title,content,message,word_count,time_limit,point,status,created_at&fields[us
er]=picture_url,profile_path,username,is_following,is_blocking,college,workplace
Query Hell

19. 1. REST API 한계
• RESTful과 JSON API는 프로토콜이지 쓸만한 라이브러리가 없다.
• 결국 직접 구현해서 사용... jsonapi.js
• 서버의 모든 endpoint에서 JSON API에 맞게 답변을 해줘야한다.
• 클라이언트에서도 데이터를 받아서 Store에 보관해야한다.
• 비즈니스 로직 짜기도 바쁜데 라이브러리 관리까지??
라이브러리 부족

21. React (2013) GraphQL (2015)

22. JS와 HTML를 합쳐버
림
REST를 대체해버
림

23. 2.
GraphQL

24. 2. GraphQL 소개
쿼리 언어
쿼리를 부르
면
Data가 json으
로

25. 2. GraphQL 소개
쿼리 언어
- Arguments
- Alias
- Fragment
- Variables
자세한 설명은 공식 문서 참조

26. 2. REST와 GraphQL 비교하기
Different Request
REST의 URI는 GraphQL 쿼리로
좀 더 간결하게 표현 가능

27. 2. REST와 GraphQL 비교하기
GET /drafts/?
include=author,reservation.editor,revision.editor,revision.review&fields[draft]=cate
gory,title,content,message,word_count,time_limit,point,status,created_at&fields[us
er]=picture_url,profile_path,username,is_following,is_blocking,college,workplace

28. 2. REST와 GraphQL 비교하기

29. 2. REST와 GraphQL 비교하기
Different Methods
GET → Query
POST, PUT, DELETE → Mutation

30. 2. GraphQL 구현 예제
Schema Definition
Type System으로 Schema를 정
의
query와 mutation은 entry point

31. 2. GraphQL 구현 예제
GraphQLObjectType
GraphQLObjectType의 fields를 정
의
필드엔 type, args, resolve

32. 2. GraphQL 구현 예제
Arguments & Resolve method
userType을 정의하고
필드의 타입을 userType으로 정의함

33. 2. GraphQL 구현 예제
Mutation
Mutation 또한 args와 resolve 사용

34. 2. GraphQL 구현 예제
Express-GraphQL
schema를 express서버에
달아두면 완료!

35. 2. GraphQL 구현 예제
Lokka - GraphQL client

36. 2. GraphQL 구현 예제
GraphiQL
자동 문서화와 Type Inspection이
가능한 강력한 툴

37. React (2013) GraphQL (2015) Relay (2015)

39. 3.
Relay

40. 3. Relay
• Node
• Connection
• React Relay
• Mutation Config
Relay가 GraphQL에서 확장하는 컨셉

41. 3. Relay 소개
Resource에 대한 단일 Interface
Data management면에서 유리함.
Node

42. 3. Relay 소개
id로 Resource를 가져옴
Node

43. 3. Relay 소개
하지만 String만으로는
어떤 Resource인지 알기 힘들어서
type과 id가 합쳐진 GlobalId를 사
용
Node

44. 3. Relay 소개
다수의 Node를 가져올때 사용
pagination에 특화되있음
Connection

45. 3. React Relay
데이터 의존성과 React 컴포넌트가 공존한다

46. 3. React Relay
<EditorCard />
<EditorInfo />
<EditorStat />

47. 3. React Relay

48. 3. React Relay
<EditorCard />
<EditorInfo />
<EditorStat />

49. 3. React Relay

50. 3. React Relay

51. 3. Mutation in Relay
Mutation의 Side Effect를
적용시키는 방식을 Config에 명시하면
클라이언트에 적절하게 반영
예제)
이미 불러온 Node의 값을 업데이트
기존에 불러온 Connection에 추가/제거
Mutation Config

52. 3. REST에서 GraphQL Relay로 갈아타기
GET, POST, PUT, DELETE으로 모든 것을 해결해야 함
→ 데이터 가져올땐 query (node, connections, 등) 사용, 변경할땐 mutation 사
용
기본값으로 어떤걸 불러올지 정하기가 애매함
→ 항상 데이터 의존성을 명시
필드 타입이 정해져 있지 않아서 따로 문서화를 하지 않으면 협업이 힘듬
→ GraphQL은 타입이 정해져 있고 프로토콜 단에서 확인할 수 있음
(Introspection)
Summary

53. 3. REST에서 GraphQL Relay로 갈아타기
데이터 의존성을 URI 에 명세하려면 복잡해진다.
→ 데이터 의존성을 명세한 query / mutation를 보낸다
데이터 변경사항을 클라이언트에서 처리하는 방식이 제각각
→ Mutation Config만 잘 써주면 알아서 데이터 변경사항을 처리한다
Summary

54. 3. REST에서 GraphQL Relay로 갈아타기
Data management를 React와 묶어줘서 생산성과 개발 속도가 크게 향상
Query build + Cache로 인하여 성능 향상
지금 존재하는 온라인 문서만으로는 Relay의 진입장벽은 꽤 높은 편
현재 Relay는 실시간 지원이 미비…
현재 GraphQL Relay만으론 안정적인 서비스 구현이 가능… 하지만 아직 실험적인
생태계
Aftermath

55. 3. 관련 링크
관련 링크
http://graphql.org/ - GraphQL 영문 공식 홈페이지
https://facebook.github.io/relay/ - GraphQL Relay 영문 공식 홈페이지
https://facebook.github.io/graphql/ - GraphQL 영문 명세서
https://learngraphql.com/ - GraphQL 영문 튜토리얼
https://github.com/chentsulin/awesome-graphql - GraphQL 리소스 모음집
https://github.com/kriasoft/react-starter-kit - 현재 최강의 boilerplate
http://blog.sapzil.org/2015/09/01/graphql-rfc/ - 그나마 찾은 한글 기사

56. Q&A

57. Thank You
이정우 (연사자): jw@ediket.com
이철희 (기술 제공): leechulhee95@gmail.com