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

4,948 views

Published on

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

Published in: Technology
3 Comments
73 Likes
Statistics
Notes
  • @Kwanlae Kim 안녕하세요. GraphQL은 본질적으로 Http status/네트워크 에러를 전혀 관여를 하지 않아서 GraphQL 개발자들 사이에서도 200이외의 에러를 사용하는 것을 권장하지 않습니다 (200이 아닌 응답의 Schema는 깨질 수 있다고 합니다). 확실히 기존 REST에 특화된 시스템하고는 잘 안어울릴 수 있습니다. 그래도 정 하시고 싶으시면 여기 이슈를 참고하시길 바랍니다 https://github.com/graphql/express-graphql/issues/36
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • graphQL 의 response 는 모든 경우가 200 OK 인 것 같은데요, HTTP response status code 를 사용하려면 어떻게 해야 할까요? 로깅이나 모니터링 시스템과 연동할 경우 4xx, 5xx 등의 http response code 로 알람이나 성능측정을 하는 경우, 4xx, 5xx 에 해당하는 경우도 200 OK 로만 응답해서는 부정확한 모니터링이 될 것 같아서요.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 안녕하세요, 이정우입니다. 질문을 여기 남겨주시면 답장드리겠습니다! 매주 체크할께요 :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,948
On SlideShare
0
From Embeds
0
Number of Embeds
1,181
Actions
Shares
0
Downloads
123
Comments
3
Likes
73
Embeds 0
No embeds

No notes for slide

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

  1. 1. 이정우 에디켓 REST에서 GraphQL과 Relay로 갈아타기
  2. 2. 목차 1. REST API - Status Quo & Limitations 2. GraphQL - How it replaces REST 3. Relay - Data fetching and management
  3. 3. 1. REST API
  4. 4. 1. REST API 소개 리소스를 URI로 표현 GET, POST, PUT, DELETE 활용 웹 개발 아키텍처
  5. 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. 6. 1. REST API 현황 GET /api/users/를 했으면 결과 값은 어떻게 돌려줘야하나? HTTP Response
  7. 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. 8. https://api.github.com/repos/octocat/Hello- World/issues/ 1. REST API 현황 Github 방식 https://developer.github.com/v3/issues/
  9. 9. https://openapi.naver.com/blog/list Category.json 1. REST API 현황 Naver 방식 https://developers.naver.com/docs/blog/post
  10. 10. 1. REST API 현황 사실상 각자 제멋대로… 추가 함수는? POST Response? 필터는? 정렬은? 페이지네이션 은?
  11. 11. 1. REST API 현황 그래도 그나마 쓸만한… http://jsonapi.org/
  12. 12. 1. REST API 현황 • Relationship 가져오기? ✓ • 부분 필드만 가져오기? ✓ • 필터 적용방법? ✓ • 정렬하기? ✓ • 페이지네이션? ✓ • POST Response? ✓ • 깃허브에 별 갯수? ✓
  13. 13. 1. REST API 한계 필드 제한 (Sparse Fieldset)
  14. 14. 모든 필드 전부다 가져와야 하나? 접근 권한이 없는 필드는 가져오지 말아야 하나? Admin과 일반 유저가 기본적으로 가져오는 필드가 다르나? 1. REST API 한계 필드 제한 (Sparse Fieldset)
  15. 15. 1. REST API 한계 유저 1의 모든 필드를 가져오고 싶지만 그가 팔로우하는 유저들의 username, email만 가져오고 싶은데… 결과: 모든 유저의 username과 email을 가져옴 필드 제한 (Sparse Fieldset)
  16. 16. 1. REST API 한계 필드 타입
  17. 17. 1. REST API 한계 POST /payments/ 를 하니 유저 1의 credit이 변경되었다. 그런데 클라이언트에서 이미 유저 1를 불러왔으며 credit값이 아직 동기화 되지 않 았다. - POST Response에 만들어진 payment와 같이 변경된 유저도 가져오기? - GET /users/1/ 로 한번 더 불러오기? Side Effect
  18. 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. 19. 1. REST API 한계 • RESTful과 JSON API는 프로토콜이지 쓸만한 라이브러리가 없다. • 결국 직접 구현해서 사용... jsonapi.js • 서버의 모든 endpoint에서 JSON API에 맞게 답변을 해줘야한다. • 클라이언트에서도 데이터를 받아서 Store에 보관해야한다. • 비즈니스 로직 짜기도 바쁜데 라이브러리 관리까지?? 라이브러리 부족
  20. 20. React (2013) GraphQL (2015)
  21. 21. JS와 HTML를 합쳐버 림 REST를 대체해버 림
  22. 22. 2. GraphQL
  23. 23. 2. GraphQL 소개 쿼리 언어 쿼리를 부르 면 Data가 json으 로
  24. 24. 2. GraphQL 소개 쿼리 언어 - Arguments - Alias - Fragment - Variables 자세한 설명은 공식 문서 참조
  25. 25. 2. REST와 GraphQL 비교하기 Different Request REST의 URI는 GraphQL 쿼리로 좀 더 간결하게 표현 가능
  26. 26. 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
  27. 27. 2. REST와 GraphQL 비교하기
  28. 28. 2. REST와 GraphQL 비교하기 Different Methods GET → Query POST, PUT, DELETE → Mutation
  29. 29. 2. GraphQL 구현 예제 Schema Definition Type System으로 Schema를 정 의 query와 mutation은 entry point
  30. 30. 2. GraphQL 구현 예제 GraphQLObjectType GraphQLObjectType의 fields를 정 의 필드엔 type, args, resolve
  31. 31. 2. GraphQL 구현 예제 Arguments & Resolve method userType을 정의하고 필드의 타입을 userType으로 정의함
  32. 32. 2. GraphQL 구현 예제 Mutation Mutation 또한 args와 resolve 사용
  33. 33. 2. GraphQL 구현 예제 Express-GraphQL schema를 express서버에 달아두면 완료!
  34. 34. 2. GraphQL 구현 예제 Lokka - GraphQL client
  35. 35. 2. GraphQL 구현 예제 GraphiQL 자동 문서화와 Type Inspection이 가능한 강력한 툴
  36. 36. React (2013) GraphQL (2015) Relay (2015)
  37. 37. 3. Relay
  38. 38. 3. Relay • Node • Connection • React Relay • Mutation Config Relay가 GraphQL에서 확장하는 컨셉
  39. 39. 3. Relay 소개 Resource에 대한 단일 Interface Data management면에서 유리함. Node
  40. 40. 3. Relay 소개 id로 Resource를 가져옴 Node
  41. 41. 3. Relay 소개 하지만 String만으로는 어떤 Resource인지 알기 힘들어서 type과 id가 합쳐진 GlobalId를 사 용 Node
  42. 42. 3. Relay 소개 다수의 Node를 가져올때 사용 pagination에 특화되있음 Connection
  43. 43. 3. React Relay 데이터 의존성과 React 컴포넌트가 공존한다
  44. 44. 3. React Relay <EditorCard /> <EditorInfo /> <EditorStat />
  45. 45. 3. React Relay
  46. 46. 3. React Relay <EditorCard /> <EditorInfo /> <EditorStat />
  47. 47. 3. React Relay
  48. 48. 3. React Relay
  49. 49. 3. Mutation in Relay Mutation의 Side Effect를 적용시키는 방식을 Config에 명시하면 클라이언트에 적절하게 반영 예제) 이미 불러온 Node의 값을 업데이트 기존에 불러온 Connection에 추가/제거 Mutation Config
  50. 50. 3. REST에서 GraphQL Relay로 갈아타기 GET, POST, PUT, DELETE으로 모든 것을 해결해야 함 → 데이터 가져올땐 query (node, connections, 등) 사용, 변경할땐 mutation 사 용 기본값으로 어떤걸 불러올지 정하기가 애매함 → 항상 데이터 의존성을 명시 필드 타입이 정해져 있지 않아서 따로 문서화를 하지 않으면 협업이 힘듬 → GraphQL은 타입이 정해져 있고 프로토콜 단에서 확인할 수 있음 (Introspection) Summary
  51. 51. 3. REST에서 GraphQL Relay로 갈아타기 데이터 의존성을 URI 에 명세하려면 복잡해진다. → 데이터 의존성을 명세한 query / mutation를 보낸다 데이터 변경사항을 클라이언트에서 처리하는 방식이 제각각 → Mutation Config만 잘 써주면 알아서 데이터 변경사항을 처리한다 Summary
  52. 52. 3. REST에서 GraphQL Relay로 갈아타기 Data management를 React와 묶어줘서 생산성과 개발 속도가 크게 향상 Query build + Cache로 인하여 성능 향상 지금 존재하는 온라인 문서만으로는 Relay의 진입장벽은 꽤 높은 편 현재 Relay는 실시간 지원이 미비… 현재 GraphQL Relay만으론 안정적인 서비스 구현이 가능… 하지만 아직 실험적인 생태계 Aftermath
  53. 53. 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/ - 그나마 찾은 한글 기사
  54. 54. Q&A
  55. 55. Thank You 이정우 (연사자): jw@ediket.com 이철희 (기술 제공): leechulhee95@gmail.com

×