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 events viewer built on GraphQL
Search
Fumiaki MATSUSHIMA
June 28, 2018
Programming
2
850
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
810
Ruby で作る Ruby (物理)
mtsmfm
0
150
GraphQL Ruby benchmark
mtsmfm
1
610
タイムアウトにご用心 / Timeout might break application state
mtsmfm
6
2.2k
Build REST API with GraphQL Ruby
mtsmfm
0
240
GraphQL Ruby をちょっとだけ速くした / Make graphql-ruby faster a bit
mtsmfm
1
570
Gaming PC on GCP
mtsmfm
0
580
How to introduce GraphQL to an existing React-Redux application
mtsmfm
1
170
Canary release in StudySapuri
mtsmfm
0
2.7k
Other Decks in Programming
See All in Programming
雑に思考を整理する技術と効能
konifar
53
24k
甘い香りに誘われてVanilla Extractを1年間運用してみた
miyahkun
1
110
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
7
4.1k
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.7k
プールにゆこう
irof
2
120
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
31
21k
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
元気予報
suu_mire0726
0
850
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
Semantic search with Django and pgvector
pauloxnet
0
230
Elm Form Validation
bkuhlmann
0
500
Featured
See All Featured
Embracing the Ebb and Flow
colly
78
4.1k
4 Signs Your Business is Dying
shpigford
175
21k
Adopting Sorbet at Scale
ufuk
67
8.6k
Design by the Numbers
sachag
274
18k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Done Done
chrislema
178
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
Building Your Own Lightsaber
phodgson
97
5.7k
Building Adaptive Systems
keathley
29
1.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
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