apolloを使って、react-reduxの世界にgraphqlを持ち込む
TRANSCRIPT
1
APOLLOを使って、REACT, REDUXの世界にGRAPHQLを持ち込む
chuck 2016/9/2 @Gotanda.js
14
ABOUT ME
3
• フロントエンドエンジニア • 平成３年産 • @chuck0523 FollowMe :)
ABOUT ME
11
ABOUT ME
Global triple worker
8
TONIGHT’S TOPIC
7
React.js, Redux, GraphQL
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
Create store
8
THAT’S IT
4
APPOLOの良いところ• isomorphic : クライアント・サーバサイドの⾯面倒を⾒見てくれる
• new tech : GraphQLが使える
• reusability : フェッチするデータをコンポーネントが知っている
• less code : ボイラープレートが減る
4
むずいところ
• less info : 情報が少ない。記事によって⼿手法が異なる…？
• learning cost : 社内にGraphQLできる⼈人間いる？
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