vue.js + graphql + ruby on rails でつくる spa · vue.js + graphql + ruby on rails...
TRANSCRIPT
Vue.js + GraphQL + Ruby on Rails でつくる SPA
Kosuke Abe/giftee*Inc.2020/02/06
About MeJob
Hobby
https://machidania.tokyo/
マチダニアというサークルで文学フリマに小説を出展してます
+ Official website
kousuke1201abeGitHub
giftee Rails エンジニア👨💻
SF全般(小説読んだり書いたりとか)📚
@memetics10
Intro-Don Generatorアーティスト名を入力すると、
そのアーティストの曲当てクイズを生成してくれる君 (イントロドンができるとは言ってない)
https://musiq-quiz-generator.herokuapp.com/
🙆 話すこと 🙅 話さないこと・主に GraphQL について ・作ったアプリの細かいことについて(個人開発nightとは)
Intro-Don Generator
・Vue/Rails でどんな実装をしてるか
System Overview
Vue.js
Apollo client (apollo-client + vue-apollo)
GraphQL (graphql-ruby)
Ruby on Rails iTunes API
herokuFirebase hosting
Infrastructure
API serverFrontend
System Overview
Vue.js
Apollo client (vue-apollo)
GraphQL (graphql-ruby)
Ruby on Rails iTunes API
herokuFirebase hosting
Infrastructure
API serverFrontend
ココ
GraphQL?
RESTful APIURL と HTTP method の組み合わせでリソースを表現
神エンドポイント（ex: “POST /graphql”だけ等）と body の スキーマ定義
GraphQL API
GET api/v1/quizzes/:id (クイズ詳細取得) /graphql
POST api/v1/quizzes (クイズ新規作成) /graphql
query {
quiz {
name
}
}
mutation createQuiz($name: String!){ createQuiz(input: { name: $name }) { quiz { name } }}
・Facebookが開発しているWeb APIのための規格 ・REST と比較されることが多いが、REST を代替するものではないらしい
Example Example
GraphQL Query & Mutation
取得 GET Query
登録 POST Mutation
更新 PUT/PATCH Mutation
削除 DELETE Mutation
・GraphQL を利用したい場合、とりあえず Query と Mutation だけ覚えれば OK 👍
データ取得系のクエリ
データ更新系のクエリ
Query
Mutation
websocketを使った変更監視のクエリ(Subscription )
HTTPメソッドとの対応
Query with graphql-ruby
https://github.com/rmosolgo/graphql-ruby
イントロドンクイズの一覧を 取得したい！
Mutation with graphql-ruby
イントロドンクイズを 新規作成したい！
Mutation with vue-apollo
GraphQL の悩みどころ
・N + 1 問題
・エラーハンドリング
複数のデータを一つのクエリで一発で取れるが、N + 1が発生しやすい
→graphql-batch(https://github.com/Shopify/graphql-batch) を利用
レスポンスの ステータスコードを200で統一し、レスポンスの errors キーにエラー詳細が入る
・やっぱり情報少ない公式ドキュメント自体は充実しているが、Ruby の情報の多さに慣れてるとちょっと大変…
→実装方針を結構考えないといけない(本アプリではエラーハンドリングをサボりました)
今後できたらやりたいこと
・Relay Cursor Connections を利用した無限スクロール・GraphQL subscription を利用してリアルタイムに同時イントロドン
Vue.js + GraphQL + Ruby on Rails でアプリ作った所感
・機能の開発に入るまでのセットアップが結構面倒
・フロントエンドエンジニアとサーバーサイドエンジニアの 距離感が遠いプロジェクトのほうがGraphQL の schema が活きてきそう
・webpack の設定 ・asset pipeline/webpacker を剥がす ・ApolloClient や GraphQL server の準備 ・etc….
Vue.js + GraphQL + Ruby on Rails の所感
機能の開発に入るまでのセットアップが結構面倒
フロントエンドエンジニアとサーバーサイドエンジニアの 距離感が遠いプロジェクトのほうがGraphQL の schema が活きてきそう
・webpack の設定 ・asset pipeline/webpacker を剥がす ・ApolloClient や GraphQL server の準備 ・etc….
楽しければよし 👍
(個人開発なので)
Thank you!