$30 off During Our Annual Pro Sale. View details »

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

Fumiaki MATSUSHIMA
June 28, 2018
Programming
2
740

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

See All by Fumiaki MATSUSHIMA
GraphQL Ruby benchmark
mtsmfm
1
340
タイムアウトにご用心 / Timeout might break application state
mtsmfm
6
1.8k
Build REST API with GraphQL Ruby
mtsmfm
0
190
GraphQL Ruby をちょっとだけ速くした / Make graphql-ruby faster a bit
mtsmfm
1
370
Gaming PC on GCP
mtsmfm
0
470
How to introduce GraphQL to an existing React-Redux application
mtsmfm
1
150
Canary release in StudySapuri
mtsmfm
0
2.4k
Analyze Rails CI
mtsmfm
2
480
VSCodeVim が意外と Vim だった / VSCodeVim is also Vim
mtsmfm
3
2.9k

Other Decks in Programming

See All in Programming
디자인에 이어 코딩까지 AI가 프로그램 개발을 척척? : GitHub Copilot, 어디까지 알아보셨나요
outsider
0
490
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
630
How To 脆弱性対応
cmkomuro
0
260
Navigating the Streaming Landscape
dunithd
0
220
ComposeCamp2022 Pathway2
veronikapj
1
120
排他制御のためだけに渋々 Redis 使ってませんか？
mpyw
7
740
Django REST Framework はじめの一歩 〜 押さえておきたい３つのポイント 〜 / First step of Django REST Framework (stapy#87 2022)
akiyoko
0
330
E2Eテストから負荷試験シナリオを作ってみた / Why do we make a scenario of load testing from E2E testing scenarios
mackee
0
680
Web開発を補助する目的でPlaywrightを使っている話
aokiken
0
170
はてなブログ作成から投稿までをGitHub Actionsで自動化する
myamashii
1
350
JSConf JP 2022 introduce React Query
maminami373
0
1.1k
Isolated Development
vrallev
0
290

Featured

See All Featured
Visualization
eitanlees
126
12k
Support Driven Design
roundedbygravity
87
8.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Atom: Resistance is Futile
akmur
256
24k
Building an army of robots
kneath
301
40k
Rails Girls Zürich Keynote
gr2m
87
12k
The Pragmatic Product Professional
lauravandoore
19
3.3k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
8.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
Infographics Made Easy
chrislema
234
17k
Design by the Numbers
sachag
271
17k
The World Runs on Bad Software
bkeepers
PRO
59
5.6k

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