instant learning graphql and relay

シュッとーく #01
(永和社内イベント)

Transcript

1. (株)永和システムマネジメント @mtsmfm 松島 史秋 シュッと学ぶ GraphQL/Relay
2. ※ 仕事ではまだ使えてないので あんまりつっこまれてもこまるよ
3. GraphQL とは
4. http://graphql.org/
5. API のための クエリ言語
6. REST API の問題
7. User 1-* Tweet
8. /users [ {id: 1}, {id: 2} ]
9. /users/1/tweets [ {id: 1, body: ‘hi’}, {id: 2, body: ‘bye’} ]
10. /users/2/tweets [ {id: 3, body: ‘あ’}, {id: 4, body: ‘い’} ]
11. /users /users/1/tweets /users/2/tweets ...
12. クライアント N+1
13. /users [ { id: 1 tweets: [ {id: 1, body: ‘hi’}, {id: 2, body: ‘bye’}, ] }, { id: 2 ...
14. - ふぁぼも欲しい - プロフィールも - ツイートのRTも
15. - ふぁぼも欲しい - プロフィールも - ツイートのRTも
16. そこでクエリ言語
17. /graphql query { users { id tweets { id, body } } }
18. 何が欲しいかを 書く
19. エンドポイントは 1つ
20. - query - mutation
21. - query (GET) - mutation (POST) みたいなもの
22. POST /tweets {tweet: {body: ‘hi’}} # => {id: 1, body: ‘hi’}
23. /graphql mutation { createTweet(body: ‘hi’) { tweetEdge { id, body } } }
24. Relay
25. React の コンポーネントを GraphQL に 紐付ける
26. コンポーネントは 何が欲しいかを宣言する
27. class Tweet extends React.Component { render () { return ( <div>{this.props.tweet.body}</div> ) } }
28. class Tweet extends React.Component { render () { return ( <div>{this.props.tweet.body}</div> ) } } Relay.createContainer(Tweet, { fragments: { tweet: () => Relay.QL` fragment on Tweet { body } ` } }
29. コンポーネントは 何が欲しいかを宣言する
30. 子の分は親が面倒を見る
31. class App extends React.Component { render () { return ( <Tweet tweet={this.props.tweet} /> ) } } Relay.createContainer(App, { fragments: { tweet: () => Relay.QL` fragment on Tweet { ${Tweet.getFragment(‘tweet’) } ` } }
32. GraphQL は あくまで クエリ言語
33. Relay がうまいこと 動くために GraphQL 上で 実装しないと いけない仕様
34. http://facebook.github.io/relay/docs/getting-started.html#content
35. Object Identification
36. Relay は Store 込み キャッシュとかも いい感じ (詳細はよく知らない) に扱う
37. 特定のオブジェクト “だけ” の更新が必要になる 場合がある
38. query { node(id: ‘RmFjdGlvbjox’) id, body } }
39. query { node(id: ‘RmFjdGlvbjox’) id, body } } オブジェクトの グローバル ID
40. Connection
41. query { users { tweets( first: 5, after: ‘RmFjdGlvbjox’ ) { edges { node { id, body } pageInfo { hasNextPage } } } }
42. query { users { tweets( first: 5, after: ‘RmFjdGlvbjox’ ) { edges { node { id, body } pageInfo { hasNextPage } } } }
43. Cursor based Pagination 無限スクロール
44. Offset based Pagination <- < 1, [2], 3 > ->
45. (特に流速が速いと) offset でやると 見落としてしまう
46. 我々の頭は あまりに offset ベースに 慣れすぎている
47. (流速が遅いと) 「あの辺」という 脳内インデックスが できる
48. この辺 https://dev-blog.apollodata.com/understanding-pagin ation-rest-graphql-and-relay-b10f835549e7#.n34gvtq r5
49. まとめ
50. GraphQL/Relay によって - クライアント N+1 が解消する - クライアント(コンポーネント)が必要なものを 自分で宣言して取ってこれる - リクエストを投げて Store に放り込んでコン ポーネントに繋げるまでを考える戦いに終止 符が打たれる - Schema による秩序が靠らされる
51. とりあえず GitHub の GraphQL であそんでみては https://developer.github.com/early-access/gr aphql/explorer/ https://github.com/github/github-graphql-rail s-example/
52. その後は素振り https://github.com/gauravtiwari/relay-rails-bl og/ https://github.com/rmosolgo/graphql-ruby
53. よく知らない/素振れてないこと - Validation - Auth - 親の variable が必要な Mutation
54. Credits Background pattern from subtlepatterns.com Emoji provided free by Emoji One