Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Fumiaki MATSUSHIMA

June 28, 2018
Tweet

More Decks by Fumiaki MATSUSHIMA

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. https://studysapuri.jp/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Quipper では
    すべて GH issue

    View full-size slide

  10. 問い合わせ

    View full-size slide

  11. 一瞬であふれる通知

    View full-size slide

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

    View full-size slide

  13. https://jasperapp.io/

    View full-size slide

  14. We ♥ Jasper

    View full-size slide

  15. とはいえ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. Tweet Deck
    っぽいやつ?

    View full-size slide

  19. つくることにした

    View full-size slide

  20. GitHub API v4
    GraphQL

    View full-size slide

  21. GitHub
    ブラウザ

    View full-size slide

  22. なぜか events が
    ない

    View full-size slide

  23. Graph
    QL サー

    Action
    Cable
    サーバ
    GitHub
    GitHub
    クローラ
    Postgres
    ブラウザ

    View full-size slide

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

    View full-size slide

  25. graphql-ruby
    ActionCable
    Relay

    View full-size slide

  26. なぜ GraphQL?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. みどころ1

    View full-size slide

  30. graphiql-rails
    を使わない

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. Sprockets
    前提

    View full-size slide

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

    View full-size slide

  35. みどころ2

    View full-size slide

  36. Relay
    Client Schema

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. みどころ3

    View full-size slide

  48. GraphQL
    Subscription

    View full-size slide

  49. Graph
    QL サー

    Action
    Cable
    サーバ
    GitHub
    GitHub
    クローラ
    Postgres
    ブラウザ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. みどころ4

    View full-size slide

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

    View full-size slide

  56. [WIP] だから...

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. やってみたいこと

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide