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 @ 五反田
2. ➔ Quipper Ltd 所属 ➔ Ruby と麻雀が好き ➔ GraphQL Tokyo 主催 @mtsmfm.inspect
3. https://www.quipper.com/
4. https://studysapuri.jp/
5. https://techplay.jp/event/680406
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