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
910
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
960
Ruby で作る Ruby (物理)
mtsmfm
0
170
GraphQL Ruby benchmark
mtsmfm
1
710
タイムアウトにご用心 / Timeout might break application state
mtsmfm
6
2.4k
Build REST API with GraphQL Ruby
mtsmfm
0
260
GraphQL Ruby をちょっとだけ速くした / Make graphql-ruby faster a bit
mtsmfm
1
660
Gaming PC on GCP
mtsmfm
0
650
How to introduce GraphQL to an existing React-Redux application
mtsmfm
1
200
Canary release in StudySapuri
mtsmfm
0
2.9k
Other Decks in Programming
See All in Programming
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
550
DjangoNinjaで高速なAPI開発を実現する
masaya00
1
540
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
130
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
230
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
1.2k
知られざるNaNの世界
hole
0
160
フロントエンドの現在地とこれから
koba04
10
4.6k
文化が生産性を作る
jimpei
3
580
"Swarming" をコンセプトに掲げるアジャイルチームのベストプラクティス
boykush
2
260
rtcamp 10 (vk-illuminati)
yumcyawiz
0
150
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
140
Scan with Decoupled Look-back and Onesweep Radix Sort
shocker_0x15
0
110
Featured
See All Featured
The Cult of Friendly URLs
andyhume
77
6k
Bash Introduction
62gerente
608
210k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
46
4.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
In The Pink: A Labor of Love
frogandcode
139
22k
Code Review Best Practice
trishagee
63
17k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
30
1.7k
Faster Mobile Websites
deanohume
304
30k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
660
Making the Leap to Tech Lead
cromwellryan
131
8.9k
For a Future-Friendly Web
brad_frost
174
9.3k
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