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
200
GraphQL Ruby benchmark
mtsmfm
1
790
タイムアウトにご用心 / Timeout might break application state
mtsmfm
6
2.5k
Build REST API with GraphQL Ruby
mtsmfm
0
310
GraphQL Ruby をちょっとだけ速くした / Make graphql-ruby faster a bit
mtsmfm
1
710
Gaming PC on GCP
mtsmfm
0
710
How to introduce GraphQL to an existing React-Redux application
mtsmfm
1
240
Canary release in StudySapuri
mtsmfm
0
3k
Other Decks in Programming
See All in Programming
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
6.1k
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
110
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
7
3k
Develop Faster With FrankenPHP
dunglas
2
3.3k
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
3
370
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.4k
5年間継続して開発した自作OSSの記録
bebeji_nappa
0
200
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
640
リアルタイムレイトレーシング + ニューラルレンダリング簡単紹介 / Real-Time Ray Tracing & Neural Rendering: A Quick Introduction (2025)
shocker_0x15
1
300
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
170
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
140
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
240
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Become a Pro
speakerdeck
PRO
27
5.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
660
It's Worth the Effort
3n
184
28k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
A better future with KSS
kneath
239
17k
Designing for humans not robots
tammielis
252
25k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
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