Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
APOLLOを使って、REACT, REDUX
の世界にGRAPHQLを持ち込む
chuck
2016/9/2 @Gotanda.js
14
ABOUT ME
3
• フロントエンドエンジニア
• 平成3年産
• @chuck0523 FollowMe :)
ABOUT ME
11
ABOUT ME
Global triple worker
8
TONIGHT’S TOPIC
7
React.js, Redux, GraphQL
6
Integrated by Apollo
15
APOLLO
• Created by Meteor
guys
• GraphQL tool
• Both Client and
Backend
• With React, Angular,
Meteor
7
SIMPLE DATA FLOW
8
HOW IT WORKS
8
ReactコンポーネントをGraphQL(の
クエリ発⾏行機能)でラップするだけ
14
IT’S LIKE RELAY
15
RELAY.JS
• Created Facebook
guys
• Connect React and
GraphQL
• But so much magics…
8
APOLLO TOUR
6
SEEING UP
8
$ npm install -S apollo-client react-apollo
13
Initialise apollo client
13
With Arguments
9
Wrap by ApolloProvider
6
WRITING GRAPHQL
9
In Template literal
8
COUPLE WITH
COMPONENT
9
Empower Component
withGraphQL
9
Condition with State
6
WITH REDUX
9
9
Create store
8
THAT’S IT
4
APPOLOの良いところ
• isomorphic : クライ
アント・サーバサイド
の⾯面倒を⾒見てくれる
• new tech : GraphQLが
使える
• reusability : フェッチ
するデータをコンポー
ネントが知って...
4
むずいところ
• less info : 情報が少な
い。記事によって⼿手法
が異なる…?
• learning cost : 社内に
GraphQLできる⼈人間い
る?
3
REFERENCES
• Apollo Client: GraphQL with React and
Redux (網羅的)
• How to use GraphQL in your Redux app
(実践的、だけど動かない…)
• Y...
Upcoming SlideShare
Loading in …5
×

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

2,454 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×