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

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