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
1.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.2k
Ruby で作る Ruby (物理)
mtsmfm
1
210
GraphQL Ruby benchmark
mtsmfm
1
830
タイムアウトにご用心 / Timeout might break application state
mtsmfm
6
2.6k
Build REST API with GraphQL Ruby
mtsmfm
0
330
GraphQL Ruby をちょっとだけ速くした / Make graphql-ruby faster a bit
mtsmfm
1
730
Gaming PC on GCP
mtsmfm
0
740
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
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
210
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
390
AI Ramen Fight
yusukebe
0
120
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
300
NEWT Backend Evolution
xpromx
1
170
階層化自動テストで開発に機動力を
ickx
1
450
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
4
520
iOS開発スターターキットの作り方
akidon0000
0
230
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
480
リッチエディターを安全に開発・運用するために
unachang113
1
310
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
590
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.7k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Navigating Team Friction
lara
188
15k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Adaptive Systems
keathley
43
2.7k
The Invisible Side of Design
smashingmag
301
51k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
RailsConf 2023
tenderlove
30
1.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
How STYLIGHT went responsive
nonsquared
100
5.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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