Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GraphQL で作る GitHub events viewer / GitHub event...
Search
Fumiaki MATSUSHIMA
June 28, 2018
Programming
2
1k
GraphQL で作る GitHub events viewer / GitHub events viewer built on GraphQL
GraphQL ナイト 6/28 @ 五反田 発表資料
https://connpass.com/event/91724/
Fumiaki MATSUSHIMA
June 28, 2018
Tweet
Share
More Decks by Fumiaki MATSUSHIMA
See All by Fumiaki MATSUSHIMA
Learning from performance improvements on GraphQL Ruby
mtsmfm
1
1.1k
Ruby で作る Ruby (物理)
mtsmfm
1
210
GraphQL Ruby benchmark
mtsmfm
1
820
タイムアウトにご用心 / Timeout might break application state
mtsmfm
6
2.5k
Build REST API with GraphQL Ruby
mtsmfm
0
320
GraphQL Ruby をちょっとだけ速くした / Make graphql-ruby faster a bit
mtsmfm
1
730
Gaming PC on GCP
mtsmfm
0
730
How to introduce GraphQL to an existing React-Redux application
mtsmfm
1
250
Canary release in StudySapuri
mtsmfm
0
3.1k
Other Decks in Programming
See All in Programming
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
460
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
370
CursorはMCPを使った方が良いぞ
taigakono
1
170
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
370
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
300
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
300
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
19
3.5k
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
140
Create a website using Spatial Web
akkeylab
0
300
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
What's in a price? How to price your products and services
michaelherold
246
12k
Why Our Code Smells
bkeepers
PRO
337
57k
Building Adaptive Systems
keathley
43
2.6k
Embracing the Ebb and Flow
colly
86
4.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
BBQ
matthewcrist
89
9.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Statistics for Hackers
jakevdp
799
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Transcript
GraphQL で作る GitHub events viewer @mtsmfm Fumiaki Matsushima GraphQL ナイト
6/28 @ 五反田
➔ Quipper Ltd 所属 ➔ Ruby と麻雀が好き ➔ GraphQL Tokyo
主催 @mtsmfm.inspect
https://www.quipper.com/
https://studysapuri.jp/
https://techplay.jp/event/680406
None
GraphQL Tokyo https://www.meetup.com/ja-JP/GraphQL-Tokyo/
https://www.meetup.com/ja-JP/GraphQL-Tokyo/events/251782724/
GraphQL で作る GitHub events viewer @mtsmfm Fumiaki Matsushima GraphQL ナイト
6/28 @ 五反田
Quipper では すべて GH issue
新機能
バグ
問い合わせ
日報
ポエム
一瞬であふれる通知
Jasper 使ってますか https://jasperapp.io/
https://jasperapp.io/
We ♥ Jasper
とはいえ
何が起きたか見るた め GitHub Issue 開 くの億劫
ふいんきでいいので 全体をざっとみたい
Tweet Deck っぽいやつ?
つくることにした
GitHub API v4 GraphQL
GitHub ブラウザ
なぜか events が ない
Graph QL サー バ Action Cable サーバ GitHub GitHub クローラ
Postgres ブラウザ
[WIP] GH deck https://github.com/mtsmfm/gh-deck
graphql-ruby ActionCable Relay
なぜ GraphQL?
A. 使いたかったから
https://github.com/mtsmfm/gh-deck/blob/db507a455f754c25864557ee4e7bd788776e529f/app/javascript/gh-deck/ containers/GithubEventListItem.jsx
みどころ1
graphiql-rails を使わない
https://github.com/mtsmfm/gh-deck/blob/db507a455f754c25864557ee4e7bd788776e529f/app/jav ascript/packs/graphiql.jsx
graphiql のアプデが gemメンテナ頼みに
Sprockets 前提
認証を考えると 結局 fetcher 必要
みどころ2
Relay Client Schema
https://github.com/mtsmfm/gh-deck/blob/db507a455f754c25864557ee4e7bd788776e529f/app/jav ascript/gh-deck/clientSchema.graphql
今までは Redux を 併用する必要が
https://medium.com/@matt.krick/replacing-redux-with-relay-47ed085bfafe
既存の Type に 追加しかできない
relay-compiler の --src 以下に Client Schema がないといけな い
https://medium.com/@matt.krick/replacing-redux-with-relay-47ed085bfafe
https://medium.com/@matt.krick/replacing-redux-with-relay-47ed085bfafe
実はそんなオプショ ンはない
relay-compiler CLI が 単に無視してるだけ
※ ドキュメントは何 ひとつない
みどころ3
GraphQL Subscription
Graph QL サー バ Action Cable サーバ GitHub GitHub クローラ
Postgres ブラウザ
https://github.com/mtsmfm/gh-deck/commit/d490c523eef32fa489625e65c835e5d1d370c861
https://speakerdeck.com/hibariya/graphql-subscription-with-relay-and-action-cable
https://github.com/mtsmfm/gh-deck/blob/db507a455f754c25864557ee4e7bd788776e529f/app/javascrip t/gh-deck/subscriptions/GithubEventCreatedSubscription.js
動くは動くが どれくらい捌けるか は謎
みどころ4
テスト
はない
テスト書いてないと かお前それry
[WIP] だから...
テストについて 思うこと
Q. GraphQLサーバ はどうテストすれば いいか?
GraphQL だからといって、Request Spec (API 単位で正常なリクエストを返すかのテスト) も E2E テスト (ブラウザを動かしてユーザ操作を再現する テスト)
も、今までとやり方が変わることはない
パラメータが多い REST API をどうテストするかという話
やってみたいこと
そもそも Event ごとに Component 作りきってちゃん と使えるようにしないと :innocent:
- Relay -> Apollo - Client Schema つらい... - Relay
の歩みが遅い... - Apollo Engine - Cache、メトリクス
Fork me on GitHub! https://github.com/mtsmfm/gh-deck