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/

Fb1b9f3d7332a7a7e262b70013b5f7dd?s=128

Fumiaki MATSUSHIMA

June 28, 2018
Tweet

Transcript

  1. GraphQL で作る GitHub events viewer @mtsmfm Fumiaki Matsushima GraphQL ナイト

    6/28 @ 五反田
  2. ➔ Quipper Ltd 所属 ➔ Ruby と麻雀が好き ➔ GraphQL Tokyo

    主催 @mtsmfm.inspect
  3. https://www.quipper.com/

  4. https://studysapuri.jp/

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

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

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

  9. GraphQL で作る GitHub events viewer @mtsmfm Fumiaki Matsushima GraphQL ナイト

    6/28 @ 五反田
  10. Quipper では すべて GH issue

  11. 新機能

  12. バグ

  13. 問い合わせ

  14. 日報

  15. ポエム

  16. 一瞬であふれる通知

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

  18. https://jasperapp.io/

  19. We ♥ Jasper

  20. とはいえ

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

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

  23. Tweet Deck っぽいやつ?

  24. つくることにした

  25. GitHub API v4 GraphQL

  26. GitHub ブラウザ

  27. なぜか events が ない

  28. Graph QL サー バ Action Cable サーバ GitHub GitHub クローラ

    Postgres ブラウザ
  29. [WIP] GH deck https://github.com/mtsmfm/gh-deck

  30. graphql-ruby ActionCable Relay

  31. なぜ GraphQL?

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

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

  34. みどころ1

  35. graphiql-rails を使わない

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

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

  38. Sprockets 前提

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

  40. みどころ2

  41. Relay Client Schema

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

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

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

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

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

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

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

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

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

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

  52. みどころ3

  53. GraphQL Subscription

  54. Graph QL サー バ Action Cable サーバ GitHub GitHub クローラ

    Postgres ブラウザ
  55. https://github.com/mtsmfm/gh-deck/commit/d490c523eef32fa489625e65c835e5d1d370c861

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

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

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

  59. みどころ4

  60. テスト

  61. はない

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

  63. [WIP] だから...

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

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

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

    も、今までとやり方が変わることはない
  67. パラメータが多い REST API をどうテストするかという話

  68. やってみたいこと

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

  70. - Relay -> Apollo - Client Schema つらい... - Relay

    の歩みが遅い... - Apollo Engine - Cache、メトリクス
  71. Fork me on GitHub! https://github.com/mtsmfm/gh-deck