Successfully reported this slideshow.
Your SlideShare is downloading. ×

Apolloを使って、React-Reduxの世界にGraphQLを持ち込む

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
GraphQL with React
GraphQL with React
Loading in …3
×

Check these out next

1 of 31 Ad
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

Recently uploaded (20)

Apolloを使って、React-Reduxの世界にGraphQLを持ち込む

  1. 1. 1 APOLLOを使って、REACT, REDUX の世界にGRAPHQLを持ち込む chuck 2016/9/2 @Gotanda.js
  2. 2. 14 ABOUT ME
  3. 3. 3 • フロントエンドエンジニア • 平成3年産 • @chuck0523 FollowMe :) ABOUT ME
  4. 4. 11 ABOUT ME Global triple worker
  5. 5. 8 TONIGHT’S TOPIC
  6. 6. 7 React.js, Redux, GraphQL
  7. 7. 6 Integrated by Apollo
  8. 8. 15 APOLLO • Created by Meteor guys • GraphQL tool • Both Client and Backend • With React, Angular, Meteor
  9. 9. 7 SIMPLE DATA FLOW
  10. 10. 8 HOW IT WORKS
  11. 11. 8 ReactコンポーネントをGraphQL(の クエリ発⾏行機能)でラップするだけ
  12. 12. 14 IT’S LIKE RELAY
  13. 13. 15 RELAY.JS • Created Facebook guys • Connect React and GraphQL • But so much magics…
  14. 14. 8 APOLLO TOUR
  15. 15. 6 SEEING UP
  16. 16. 8 $ npm install -S apollo-client react-apollo
  17. 17. 13 Initialise apollo client
  18. 18. 13 With Arguments
  19. 19. 9 Wrap by ApolloProvider
  20. 20. 6 WRITING GRAPHQL
  21. 21. 9 In Template literal
  22. 22. 8 COUPLE WITH COMPONENT
  23. 23. 9 Empower Component withGraphQL
  24. 24. 9 Condition with State
  25. 25. 6 WITH REDUX
  26. 26. 9
  27. 27. 9 Create store
  28. 28. 8 THAT’S IT
  29. 29. 4 APPOLOの良いところ • isomorphic : クライ アント・サーバサイド の⾯面倒を⾒見てくれる • new tech : GraphQLが 使える • reusability : フェッチ するデータをコンポー ネントが知っている • less code : ボイラー プレートが減る
  30. 30. 4 むずいところ • less info : 情報が少な い。記事によって⼿手法 が異なる…? • learning cost : 社内に GraphQLできる⼈人間い る?
  31. 31. 3 REFERENCES • Apollo Client: GraphQL with React and Redux (網羅的) • How to use GraphQL in your Redux app (実践的、だけど動かない…) • Your First GraphQL Server(⼿手軽に GraphQLサーバを作るなら) • Tutorial: How to build a GraphQL server

×