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 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