이정우에디켓

REST 에서GraphQL 과 Relay 로갈아타기

목차1. REST API - Status Quo & Limitations2. GraphQL - How it replaces REST3. Relay - Data fetching and management

1.REST API

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

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

예제

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

https://api.twitter.com/1.1/lists/members.json

1. REST API 현황Twitter 방식

https://dev.twitter.com/rest/reference/get/lists/members

https://api.github.com/repos/octocat/Hello-World/issues/

1. REST API 현황Github 방식

https://developer.github.com/v3/issues/

https://openapi.naver.com/blog/listCategory.json

1. REST API 현황Naver 방식

https://developers.naver.com/docs/blog/post

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

1. REST API 현황그래도 그나마 쓸만한…

http://jsonapi.org/

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

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

모든 필드 전부다 가져와야 하나 ?접근 권한이 없는 필드는 가져오지 말아야 하나 ?Admin 과 일반 유저가 기본적으로 가져오는 필드가 다르나 ?

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

1. REST API 한계

유저 1 의 모든 필드를 가져오고 싶지만그가 팔로우하는 유저들의 username, email 만 가져오고 싶은데…결과 : 모든 유저의 username 과 email 을 가져옴

필드 제한 (Sparse Fieldset)

1. REST API 한계필드 타입

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

Side Effect

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

Query Hell

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

라이브러리 부족

React (2013) GraphQL (2015)

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

2.GraphQL

2. GraphQL 소개쿼리 언어

쿼리를 부르면 Data 가 json으로

2. GraphQL 소개쿼리 언어- Arguments- Alias- Fragment- Variables

자세한 설명은 공식 문서 참조

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

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

2. REST 와 GraphQL 비교하기

2. REST 와 GraphQL 비교하기Different MethodsGET → QueryPOST, PUT, DELETE → Mutation

2. GraphQL 구현 예제Schema Definition

Type System 으로 Schema 를 정의query 와 mutation 은 entry

point

2. GraphQL 구현 예제GraphQLObjectType

GraphQLObjectType 의 fields 를 정의

필드엔 type, args, resolve

2. GraphQL 구현 예제Arguments & Resolve method

userType 을 정의하고 필드의 타입을 userType 으로 정의함

2. GraphQL 구현 예제Mutation

Mutation 또한 args 와 resolve 사용

2. GraphQL 구현 예제Express-GraphQL

schema 를 express 서버에달아두면 완료 !

2. GraphQL 구현 예제Lokka - GraphQL client

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

React (2013) GraphQL (2015) Relay (2015)

3.Relay

3. Relay

• Node• Connection• React Relay• Mutation Config

Relay 가 GraphQL 에서 확장하는 컨셉

3. Relay 소개Resource 에 대한 단일 InterfaceData management 면에서 유리함 .

Node

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

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

Node

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

3. React Relay

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

3. React Relay

<EditorCard /><EditorInfo /><EditorStat />

3. React Relay

3. React Relay

<EditorCard />

<EditorInfo />

<EditorStat />

3. React Relay

3. React Relay

3. Mutation in Relay

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

Mutation Config

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

Summary

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

Summary

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

Aftermath

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 - 현재 최강의 boilerplatehttp://blog.sapzil.org/2015/09/01/graphql-rfc/ - 그나마 찾은 한글 기사

Q&A

Thank You

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