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

1. 1 APOLLOを使って、REACT, REDUX の世界にGRAPHQLを持ち込む chuck 2016/9/2 @Gotanda.js

2. 14 ABOUT ME

3. 3 • フロントエンドエンジニア • 平成３年産 • @chuck0523 FollowMe :) ABOUT ME

4. 11 ABOUT ME Global triple worker

5. 8 TONIGHT’S TOPIC

6. 7 React.js, Redux, GraphQL

7. 6 Integrated by Apollo

8. 15 APOLLO • Created by Meteor guys • GraphQL tool • Both Client and Backend • With React, Angular, Meteor

9. 7 SIMPLE DATA FLOW

10. 8 HOW IT WORKS

11. 8 ReactコンポーネントをGraphQL（のクエリ発⾏行機能）でラップするだけ

12. 14 IT’S LIKE RELAY

13. 15 RELAY.JS • Created Facebook guys • Connect React and GraphQL • But so much magics…

14. 8 APOLLO TOUR

15. 6 SEEING UP

16. 8 $ npm install -S apollo-client react-apollo

17. 13 Initialise apollo client

18. 13 With Arguments

19. 9 Wrap by ApolloProvider

20. 6 WRITING GRAPHQL

21. 9 In Template literal

22. 8 COUPLE WITH COMPONENT

23. 9 Empower Component withGraphQL

24. 9 Condition with State

25. 6 WITH REDUX

27. 9 Create store

28. 8 THAT’S IT

29. 4 APPOLOの良いところ • isomorphic : クライアント・サーバサイドの⾯面倒を⾒見てくれる • new tech : GraphQLが使える • reusability : フェッチするデータをコンポーネントが知っている • less code : ボイラープレートが減る

30. 4 むずいところ • less info : 情報が少ない。記事によって⼿手法が異なる…？ • learning cost : 社内に GraphQLできる⼈人間いる？

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

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

chuck hayes

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