Downloaded 10 times
![GraphQL
GraphQL出来る
APIエンドポイント
シングルエンドポイントで全てのデーターを提供
store(email: “admin@abc.com”) {
name: ‘Hello Shop’,
address: ‘1-3-1 Aoyama’
categories: [
{
name: ‘Sporting Goods’,
products: [
{ name: ‘Football’, price: 20, stock: 50 },
{ name: ‘Baseball’, price: 5, stock: 30 },
…
],
...
}, …
],
}](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-6-320.jpg)
![GraphQL (cont.)
query {
store(email: "admin@abc.com") {
categories {
name,
products {
name, price, stock
}
}
}
}
store {
categories: [
{ name: ‘Sporting Goods’,
products: [
{ name: ‘Football’, price:, stock: 50 }, …
}, ...
]
}
Hello Shop
APIエンドポイント](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-9-320.jpg)
![GraphQL (cont.)
query {
store(email: "admin@abc.com") {
categories {
name,
products {
name, price, stock
}
}
}
}
store {
categories: [
{ name: ‘Sporting Goods’,
products: [
{ name: ‘Football’, price:, stock: 50 }, …
}, ...
]
}
シングル
エンドポイント
階層的な
データー
クライアント
コントロール
クエリー
１ラウンドトリッ
プ
データー
APIエンドポイント](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-10-320.jpg)
![チルドレンにデーターを渡す
this.props = {
store:
name: ‘Hello Shop’
categories: [
{
name: 'Sporting Goods',
items: [
{ name: 'Football', price: … }
…
],
},
...
],
},
}
データーとレンダリング
this.props.store.name
渡す
this.props.store.categories](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-28-320.jpg)
![GraphQL
GraphQL出来る
シングルエンドポイントで全てのデーターを提供
store(email: “admin@abc.com”) {
name: ‘Hello Shop’,
address: ‘1-3-1 Aoyama’
categories: [
{
name: ‘Sporting Goods’,
products: [
{ name: ‘Football’, price: 20, stock: 50 },
{ name: ‘Baseball’, price: 5, stock: 30 },
…
],
...
}, …
],
}
APIエンドポイント](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-31-320.jpg)
![RelayJS:コンポーネント・データーコロケーション
store(email: “admin@abc.com”) {
name: ‘Hello Shop’,
address: ‘1-3-1 Aoyama’
categories: [
{
name: ‘Sporting Goods’,
products: [
{ name: ‘Football’, price: 20, stock: 50 },
{ name: ‘Baseball’, price: 5, stock: 30 },
…
],
...
}, …
],
}
fragment on Store {
name,
address
}
Hello Shop](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-34-320.jpg)
![store(email: “admin@abc.com”) {
name: ‘Hello Shop’,
address: ‘1-3-1 Aoyama’
categories: [
{
name: ‘Sporting Goods’,
products: [
{ name: ‘Football’, price: 20, stock: 50 },
{ name: ‘Baseball’, price: 5, stock: 30 },
…
],
...
}, …
],
}
fragment on Store {
categories {
name,
products,
}
}
RelayJS:コンポーネント・データーコロケーション](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-35-320.jpg)
![store(email: “admin@abc.com”) {
name: ‘Hello Shop’,
address: ‘1-3-1 Aoyama’
categories: [
{
name: ‘Sporting Goods’,
products: [
{ name: ‘Football’, price: 20, stock: 50 },
{ name: ‘Baseball’, price: 5, stock: 30 },
…
],
...
}, …
],
}
Hello Shop
RelayJSは
各コンポーネントのデー
ターをフェッチ](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-36-320.jpg)
![チルドレンにデーターを渡す
this.props = {
store:
name: ‘Hello Shop’
categories: [
{
name: 'Sporting Goods',
items: [
{ name: 'Football', price: … }
…
],
},
...
],
},
}
データーとレンダリング
this.props.store.name
渡す
this.props.store.categories](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-37-320.jpg)
Uploaded byKhor SoonHin
Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS
Feacbookドックが書いてない説明：ReactJS/GraphQL/RelayJS. Talk at Tokyo React.js Meetup #3 (http://reactjs-meetup.connpass.com/event/26229/) English version: http://www.slideshare.net/KhorSoonHin/tokyo-reactjs-3-missing-pages-reactjsfluxgraphqlrelayjs
Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS
- 1.
- 2.
- 3. アジェンダ ● ピユアなFluxの使い方 ● GraphQL ○RelayJSなし ○ NodeJSサーバーではないの GraphQLセットアップ ● RelayJS ○ ReactJS: カプリングを下げて, リユースを上げる ○ RelayJSとGraphQLのシナジー ○ NodeJSサーバーではないの RelayJS/GraphQLセットアップ
- 4. Reactのファミリー: 一言で ... ●ReactJS: UIデーターとレンダリング ● Flux: データーフロー とコードのストラクチャー ● GraphQL: シングルAPIエンドポイントデーターアクセス ● RelayJS: Reactコンポーネントのデーターdeclaration&コロケーション
- 5.
- 6. GraphQL GraphQL出来る APIエンドポイント シングルエンドポイントで全てのデーターを提供 store(email: “admin@abc.com”) { name:‘Hello Shop’, address: ‘1-3-1 Aoyama’ categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price: 20, stock: 50 }, { name: ‘Baseball’, price: 5, stock: 30 }, … ], ... }, … ], }
- 7. GraphQL (cont.) query { store(email:"admin@abc.com") { name, address } } APIエンドポイント
- 8. GraphQL (cont.) query { store(email:"admin@abc.com") { name, address } } store(email: “admin@abc.com”) { name: ‘Hello Shop’, address: ‘1-3-1 Aoyama’ } いらっしゃいませ Hello Shop 住所： 1-3-1 Aoyama オンラインショップ APIエンドポイント
- 9. GraphQL (cont.) query { store(email:"admin@abc.com") { categories { name, products { name, price, stock } } } } store { categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price:, stock: 50 }, … }, ... ] } Hello Shop APIエンドポイント
- 10. GraphQL (cont.) query { store(email:"admin@abc.com") { categories { name, products { name, price, stock } } } } store { categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price:, stock: 50 }, … }, ... ] } シングル エンドポイント 階層的な データー クライアント コントロール クエリー １ラウンドトリッ プ データー APIエンドポイント
- 11.
- 12.
- 13.
- 14.
- 15. GraphQL: Enabling theServer ブラウザ GraphQL サーバー バンドル JS サーバー サーバー ライブラリ graphql GraphQL スキーマ ハッシュ GraphQL オーバー http(s)、など.
- 16. GraphQL: JS Code ブラウザ GraphQL サーバー バンドルJS バンドル JS サーバー サーバー ライブラリ graphql GraphQL スキーマ ハッシュ GraphQL オーバー http(s)、など.
- 17. GraphQL: Required JSLibraries ブラウザ バンドルJS バンドル JS サーバー JSライブラリ react react-dom graphql GraphQL オーバー http(s)、など. GraphQL サーバー サーバー ライブラリ graphql GraphQL スキーマ ハッシュ
- 18. GraphQL: Bundling YourJS Code ブラウザ バンドル JS バンドル JS サーバー JSライブラリ react react-dom graphql 自分の JS GraphQL オーバー http(s)、など. GraphQL サーバー サーバー ライブラリ graphql browserify/w ebpackGraphQL スキーマ ハッシュ
- 19.
- 20.
- 21.
- 22.
- 23. React (続き。。。) Hello Shop 階層的なビュー=> GraphQL 階層的なデーター
- 24. ReactJS (続き。。。) アブストラックション 各ReactJSコンポーネントが理解なこと: ● 自分のデーター ●自分のレンダリング ● チルドレンに一部分のデーターを渡す
- 25.
- 26.
- 27.
- 28. チルドレンにデーターを渡す this.props = { store: name:‘Hello Shop’ categories: [ { name: 'Sporting Goods', items: [ { name: 'Football', price: … } … ], }, ... ], }, } データーとレンダリング this.props.store.name 渡す this.props.store.categories
- 29. そんなTight Coupling, HighReuse ではない ● 親はチルドレンの データーを知るのが必要 ○ チルドレンのデーターをフェッチ ○ チルドレンの渡すのデーター部分を理解する render() { return ( <Store>{this.props.store} /> <Categories categories={this.props.store.categories} /> ) }
- 30.
- 31. GraphQL GraphQL出来る シングルエンドポイントで全てのデーターを提供 store(email: “admin@abc.com”) { name:‘Hello Shop’, address: ‘1-3-1 Aoyama’ categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price: 20, stock: 50 }, { name: ‘Baseball’, price: 5, stock: 30 }, … ], ... }, … ], } APIエンドポイント
- 32.
- 33.
- 34. RelayJS:コンポーネント・データーコロケーション store(email: “admin@abc.com”) { name:‘Hello Shop’, address: ‘1-3-1 Aoyama’ categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price: 20, stock: 50 }, { name: ‘Baseball’, price: 5, stock: 30 }, … ], ... }, … ], } fragment on Store { name, address } Hello Shop
- 35. store(email: “admin@abc.com”) { name:‘Hello Shop’, address: ‘1-3-1 Aoyama’ categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price: 20, stock: 50 }, { name: ‘Baseball’, price: 5, stock: 30 }, … ], ... }, … ], } fragment on Store { categories { name, products, } } RelayJS:コンポーネント・データーコロケーション
- 36. store(email: “admin@abc.com”) { name:‘Hello Shop’, address: ‘1-3-1 Aoyama’ categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price: 20, stock: 50 }, { name: ‘Baseball’, price: 5, stock: 30 }, … ], ... }, … ], } Hello Shop RelayJSは 各コンポーネントのデー ターをフェッチ
- 37. チルドレンにデーターを渡す this.props = { store: name:‘Hello Shop’ categories: [ { name: 'Sporting Goods', items: [ { name: 'Football', price: … } … ], }, ... ], }, } データーとレンダリング this.props.store.name 渡す this.props.store.categories
- 38. そんなTight Coupling, HighReuse ではない ● 親はチルドレンの データーを知るのが必要ない ○ チルドレンのデーターをフェッチ ○ チルドレンの渡すのデーター部分を理解する render() { return ( <Store>{this.props.store} /> <Categories categories={this.props.store.categories} /> ) }
- 39.
- 40. なぜRelayJS? ● フィーチャー: ○ コンポーネント・データーコロケーション ○Connection Id: データー再フィッチ ○ Connections: One-to-Many 関係・プージネション ○ Mutations: データー変更があったとき Reactコンポーネントを自動アップデート ● 暗黙なフィーチャー: ○ 自動データーフィッチ (AJAXコードなしで) ○ データーキャッシュとバッチフィッチ ● 面白いフィーチャー: ○ ロード中のスピナー ○ データーフェッチ失敗な実行なコード ○ オプチミスチックUIアップデート
- 41.
- 42. RelayJS:コンポーネント・データーコロケーション ブラウザ GraphQL /RelayJS サーバー バンドル JS サーバー JSライブラリ react react-dom react-relay babelify-relay- plugin babelify RelayJS コンテナ GraphQL オーバー http(s)、など graphql サーバーライ ブラリ graphql 自分の JSと Relay.QL browserify/w ebpack GraphQL スキーマ JSON バンドル JS GraphQL スキーマ ハッシュ コンバーター graphql-relay
- 43. 参考 ● 記事 ○ GraphQL/RelayJS(non NodeJS): https://medium.com/@khor/relay-facebook-on-rails-8b4af2057152 ○ Pure ‘Flux’ (non NodeJS): https://medium.com/@khor/back-to-front-rails-to-facebook-s-flux-ae815f81b16c ● スタータキット ○ Rails: https://github.com/nethsix/relay-on-rails ● チョイス: React, React (with Container), Flux/Redux, GraphQL/RelayJS ○ Shared by @koba04 - http://andrewhfarmer.com/react-ajax-best-practices/ ● フォロー: @neth_6, @reculture_us
- 44. ありがとう: ● みんな! ● koba04! ●Facebookエンジニア!