instant learning graphql and relay

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

Transcript

1. (株)永和システムマネジメント
   @mtsmfm
   松島 史秋
   シュッと学ぶ
   GraphQL/Relay
   

   View Slide

2. ※ 仕事ではまだ使えてないので
   あんまりつっこまれてもこまるよ
   

   View Slide

3. GraphQL とは
   

   View Slide

4. http://graphql.org/
   

   View Slide

5. API のための
   クエリ言語
   

   View Slide

6. REST API の問題
   

   View Slide

7. User 1-* Tweet
   

   View Slide

8. /users
   [
   {id: 1},
   {id: 2}
   ]
   

   View Slide

9. /users/1/tweets
   [
   {id: 1, body: ‘hi’},
   {id: 2, body: ‘bye’}
   ]
   

   View Slide

10. /users/2/tweets
    [
    {id: 3, body: ‘あ’},
    {id: 4, body: ‘い’}
    ]
    

    View Slide

11. /users
    /users/1/tweets
    /users/2/tweets
    ...
    

    View Slide

12. クライアント N+1
    

    View Slide

13. /users
    [
    {
    id: 1
    tweets: [
    {id: 1, body: ‘hi’},
    {id: 2, body: ‘bye’},
    ]
    },
    {
    id: 2
    ...
    

    View Slide

14. - ふぁぼも欲しい
    - プロフィールも
    - ツイートのRTも
    

    View Slide

15. - ふぁぼも欲しい
    - プロフィールも
    - ツイートのRTも
    

    View Slide

16. そこでクエリ言語
    

    View Slide

17. /graphql
    query {
    users {
    id
    tweets {
    id, body
    }
    }
    }
    

    View Slide

18. 何が欲しいかを
    書く
    

    View Slide

19. エンドポイントは
    1つ
    

    View Slide

20. - query
    - mutation
    

    View Slide

21. - query (GET)
    - mutation (POST)
    みたいなもの
    

    View Slide

22. POST /tweets
    {tweet: {body: ‘hi’}}
    # => {id: 1, body: ‘hi’}
    

    View Slide

23. /graphql
    mutation {
    createTweet(body: ‘hi’) {
    tweetEdge {
    id, body
    }
    }
    }
    

    View Slide

24. Relay
    

    View Slide

25. React の
    コンポーネントを
    GraphQL に
    紐付ける
    

    View Slide

26. コンポーネントは
    何が欲しいかを宣言する
    

    View Slide

27. class Tweet extends React.Component {
    render () {
    return (
    {this.props.tweet.body}
    )
    }
    }
    

    View Slide

28. class Tweet extends React.Component {
    render () {
    return (
    {this.props.tweet.body}
    )
    }
    }
    Relay.createContainer(Tweet, {
    fragments: {
    tweet: () => Relay.QL`
    fragment on Tweet {
    body
    }
    `
    }
    }
    

    View Slide

29. コンポーネントは
    何が欲しいかを宣言する
    

    View Slide

30. 子の分は親が面倒を見る
    

    View Slide

31. class App extends React.Component {
    render () {
    return (
    
    )
    }
    }
    Relay.createContainer(App, {
    fragments: {
    tweet: () => Relay.QL`
    fragment on Tweet {
    ${Tweet.getFragment(‘tweet’)
    }
    `
    }
    }
    

    View Slide

32. GraphQL は
    あくまで
    クエリ言語
    

    View Slide

33. Relay がうまいこと
    動くために
    GraphQL 上で
    実装しないと
    いけない仕様
    

    View Slide

34. http://facebook.github.io/relay/docs/getting-started.html#content
    

    View Slide

35. Object Identification
    

    View Slide

36. Relay は Store 込み
    キャッシュとかも
    いい感じ
    (詳細はよく知らない)
    に扱う
    

    View Slide

37. 特定のオブジェクト
    “だけ”
    の更新が必要になる
    場合がある
    

    View Slide

38. query {
    node(id: ‘RmFjdGlvbjox’)
    id, body
    }
    }
    

    View Slide

39. query {
    node(id: ‘RmFjdGlvbjox’)
    id, body
    }
    }
    オブジェクトの
    グローバル ID
    

    View Slide

40. Connection
    

    View Slide

41. query {
    users {
    tweets(
    first: 5,
    after: ‘RmFjdGlvbjox’
    ) {
    edges {
    node {
    id, body
    }
    pageInfo {
    hasNextPage
    }
    }
    }
    }
    

    View Slide

42. query {
    users {
    tweets(
    first: 5,
    after: ‘RmFjdGlvbjox’
    ) {
    edges {
    node {
    id, body
    }
    pageInfo {
    hasNextPage
    }
    }
    }
    }
    

    View Slide

43. Cursor based
    Pagination
    無限スクロール
    

    View Slide

44. Offset based
    Pagination
    <- < 1, [2], 3 > ->
    

    View Slide

45. (特に流速が速いと)
    offset でやると
    見落としてしまう
    

    View Slide

46. 我々の頭は
    あまりに
    offset ベースに
    慣れすぎている
    

    View Slide

47. (流速が遅いと)
    「あの辺」という
    脳内インデックスが
    できる
    

    View Slide

48. この辺
    https://dev-blog.apollodata.com/understanding-pagin
    ation-rest-graphql-and-relay-b10f835549e7#.n34gvtq
    r5
    

    View Slide

49. まとめ
    

    View Slide

50. GraphQL/Relay によって
    - クライアント N+1 が解消する
    - クライアント(コンポーネント)が必要なものを
    自分で宣言して取ってこれる
    - リクエストを投げて Store に放り込んでコン
    ポーネントに繋げるまでを考える戦いに終止
    符が打たれる
    - Schema による秩序が靠らされる
    

    View Slide

51. とりあえず GitHub の
    GraphQL であそんでみては
    https://developer.github.com/early-access/gr
    aphql/explorer/
    https://github.com/github/github-graphql-rail
    s-example/
    

    View Slide

52. その後は素振り
    https://github.com/gauravtiwari/relay-rails-bl
    og/
    https://github.com/rmosolgo/graphql-ruby
    

    View Slide

53. よく知らない/素振れてないこと
    - Validation
    - Auth
    - 親の variable が必要な Mutation
    

    View Slide

54. Credits
    Background pattern from subtlepatterns.com
    Emoji provided free by Emoji One
    

    View Slide