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

26. 9

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