GraphQL で作る GitHub events viewer / GitHub events viewer built on GraphQL

GraphQL ナイト 6/28 @ 五反田 発表資料

https://connpass.com/event/91724/

Transcript

1. GraphQL で作る
   GitHub events viewer
   @mtsmfm Fumiaki Matsushima
   GraphQL ナイト 6/28 @ 五反田
   

   View Slide

2. ➔ Quipper Ltd 所属
   ➔ Ruby と麻雀が好き
   ➔ GraphQL Tokyo 主催
   @mtsmfm.inspect
   

   View Slide

3. https://www.quipper.com/
   

   View Slide

4. https://studysapuri.jp/
   

   View Slide

5. https://techplay.jp/event/680406
   

   View Slide

6. View Slide

7. GraphQL Tokyo
   https://www.meetup.com/ja-JP/GraphQL-Tokyo/
   

   View Slide

8. https://www.meetup.com/ja-JP/GraphQL-Tokyo/events/251782724/
   

   View Slide

9. GraphQL で作る
   GitHub events viewer
   @mtsmfm Fumiaki Matsushima
   GraphQL ナイト 6/28 @ 五反田
   

   View Slide

10. Quipper では
    すべて GH issue
    

    View Slide

11. 新機能
    

    View Slide

12. バグ
    

    View Slide

13. 問い合わせ
    

    View Slide

14. 日報
    

    View Slide

15. ポエム
    

    View Slide

16. 一瞬であふれる通知
    

    View Slide

17. Jasper 使ってますか
    https://jasperapp.io/
    

    View Slide

18. https://jasperapp.io/
    

    View Slide

19. We ♥ Jasper
    

    View Slide

20. とはいえ
    

    View Slide

21. 何が起きたか見るた
    め GitHub Issue 開
    くの億劫
    

    View Slide

22. ふいんきでいいので
    全体をざっとみたい
    

    View Slide

23. Tweet Deck
    っぽいやつ?
    

    View Slide

24. つくることにした
    

    View Slide

25. GitHub API v4
    GraphQL
    

    View Slide

26. GitHub
    ブラウザ
    

    View Slide

27. なぜか events が
    ない
    

    View Slide

28. Graph
    QL サー
    バ
    Action
    Cable
    サーバ
    GitHub
    GitHub
    クローラ
    Postgres
    ブラウザ
    

    View Slide

29. [WIP] GH deck
    https://github.com/mtsmfm/gh-deck
    

    View Slide

30. graphql-ruby
    ActionCable
    Relay
    

    View Slide

31. なぜ GraphQL?
    

    View Slide

32. A. 使いたかったから
    

    View Slide

33. https://github.com/mtsmfm/gh-deck/blob/db507a455f754c25864557ee4e7bd788776e529f/app/javascript/gh-deck/
    containers/GithubEventListItem.jsx
    

    View Slide

34. みどころ1
    

    View Slide

35. graphiql-rails
    を使わない
    

    View Slide

36. https://github.com/mtsmfm/gh-deck/blob/db507a455f754c25864557ee4e7bd788776e529f/app/jav
    ascript/packs/graphiql.jsx
    

    View Slide

37. graphiql のアプデが
    gemメンテナ頼みに
    

    View Slide

38. Sprockets
    前提
    

    View Slide

39. 認証を考えると
    結局 fetcher 必要
    

    View Slide

40. みどころ2
    

    View Slide

41. Relay
    Client Schema
    

    View Slide

42. https://github.com/mtsmfm/gh-deck/blob/db507a455f754c25864557ee4e7bd788776e529f/app/jav
    ascript/gh-deck/clientSchema.graphql
    

    View Slide

43. 今までは Redux を
    併用する必要が
    

    View Slide

44. https://medium.com/@matt.krick/replacing-redux-with-relay-47ed085bfafe
    

    View Slide

45. 既存の Type に
    追加しかできない
    

    View Slide

46. relay-compiler の
    --src 以下に Client
    Schema がないといけな
    い
    

    View Slide

47. https://medium.com/@matt.krick/replacing-redux-with-relay-47ed085bfafe
    

    View Slide

48. https://medium.com/@matt.krick/replacing-redux-with-relay-47ed085bfafe
    

    View Slide

49. 実はそんなオプショ
    ンはない
    

    View Slide

50. relay-compiler CLI が
    単に無視してるだけ
    

    View Slide

51. ※ ドキュメントは何
    ひとつない
    

    View Slide

52. みどころ3
    

    View Slide

53. GraphQL
    Subscription
    

    View Slide

54. Graph
    QL サー
    バ
    Action
    Cable
    サーバ
    GitHub
    GitHub
    クローラ
    Postgres
    ブラウザ
    

    View Slide

55. https://github.com/mtsmfm/gh-deck/commit/d490c523eef32fa489625e65c835e5d1d370c861
    

    View Slide

56. https://speakerdeck.com/hibariya/graphql-subscription-with-relay-and-action-cable
    

    View Slide

57. https://github.com/mtsmfm/gh-deck/blob/db507a455f754c25864557ee4e7bd788776e529f/app/javascrip
    t/gh-deck/subscriptions/GithubEventCreatedSubscription.js
    

    View Slide

58. 動くは動くが
    どれくらい捌けるか
    は謎
    

    View Slide

59. みどころ4
    

    View Slide

60. テスト
    

    View Slide

61. はない
    

    View Slide

62. テスト書いてないと
    かお前それry
    

    View Slide

63. [WIP] だから...
    

    View Slide

64. テストについて
    思うこと
    

    View Slide

65. Q. GraphQLサーバ
    はどうテストすれば
    いいか?
    

    View Slide

66. GraphQL だからといって、Request Spec (API
    単位で正常なリクエストを返すかのテスト) も E2E
    テスト (ブラウザを動かしてユーザ操作を再現する
    テスト) も、今までとやり方が変わることはない
    

    View Slide

67. パラメータが多い REST API
    をどうテストするかという話
    

    View Slide

68. やってみたいこと
    

    View Slide

69. そもそも Event ごとに
    Component 作りきってちゃん
    と使えるようにしないと
    :innocent:
    

    View Slide

70. - Relay -> Apollo
    - Client Schema つらい...
    - Relay の歩みが遅い...
    - Apollo Engine
    - Cache、メトリクス
    

    View Slide

71. Fork me on GitHub!
    https://github.com/mtsmfm/gh-deck
    

    View Slide