こんにちは！RYOTAです！
ご覧いただきありがとうございます！
当記事はTSLab・GraphQL勉強会のレポート記事になります。
はじめに
私が運営しているTSLabでは、定期的にTypeScriptやReactの勉強会を実施しております。
今回から新たにGraphQLを取り扱っていくことになったので、簡単なログとしてまとめていこうと思います。
このGraphQL勉強会も例の如く公式のドキュメントを元にディスカッション。
まずは初回ということで、GraphQLの基礎を学習していきました。
実施内容
Introduction to GraphQL
まずばGraphQLの概要。
本当に基礎的な内容になるのでサクッと流しつつGraphQLの特徴だけを学習
Queries and Mutations
ここからが本題。
GraphQLのメインとなるQueryとMutationの使い方について学習。
具体的には下記の内容について軽くディスカッションをしつつ、概要や使い方をインプット。
- Fields
- Arguments
- Aliases
- Fragments
- Operation name
- Variables
- Directives
- Mutations
- Inline Fragments
ドキュメント内のプレイグラウンドでクエリを変更すると結果に反映されるので学習教材としてとても良いですね。
ポケモンのデータを検索できるサービスを叩いて遊んでる方も数名いらっしゃったのですが、こちらも学習には良さそうなので気になる方は下記のリンクから触ってみてください。
https://graphql-pokemon2.vercel.app/
学習内容
オーバーフェッチ、アンダーフェッチを回避できる
RESTは決められたフィールドを返すのに対し、GraphQLはクライアント側で必要なフィールドを明示的に要求するため、オーバーフェッチやアンダーフェッチが起こらないのが最大の特徴。
データ取得後にクライアント側で不要なフィールドを破棄したり、必要なデータが増えたためにバックエンド側の反映を待つ必要が無いのは良いですね。
上記の理由によりクライアント側の事情に引きづられ辛くなるので、バックエンド側の実装においてもメリットが大きいのではないかと思います。
N+1問題について
GraphQLを触ってみるとすぐN+1問題にぶち当たるのが想像できると思います。
実際どのグループでも議題に上がっていましたしね。
問題として話題には上がりましたが解決方法まで議論は進んでいなかったので次回以降の議題に上げても良さそうですね。
Prismaを使うことである程度回避できる(?)的な情報もあったので今後触れてみても良いかも。
REST から GraphQLに変えることで全てが良くなるという訳でもない
当たり前の話になりますが技術には長所と短所があります。
どのグループもRESTと比較して話をしていましたが、根本的に考え方が異なるので学習コスト/導入コストは少々高いのかなと感じました。
特に「複数箇所から呼ばれたりユーザーの検索クエリによってフィールド構造が大きく変化する場合を除いてはRESTで良くね？」みたいな話も上がっていたので、どういったケースで導入すると良さそうかなどは今後の議題に上げても良さそうですね。
感想
触らんとイメージ出来ん
当たり前っちゃ当たり前のことですが、ドキュメントだけ読んでも「で？それが何？」になっちゃいますね。笑
今回の参加者の内、実際に環境を構築してきた人は30%程。
この方々の方が深い議論になるので言うまでもないですね。
今回の反省を踏まえつつ、次回の勉強会では実際にGraphQLを触れる環境で遊んでみようかなと考えています。
(構築してくれるイケメンさん頼んだ!!)
ツールやライブラリの話に飛びがち
今回の主目的は「GraphQLの基礎を一から学習する」としていたのですが、やはりApolloの話に飛んだりが多かったかなといった印象。
これはちょっと運営の仕方が良くなかった。ごめんちゃい。
フルスタック寄りの人の方がメリットを感じやすかったかも
フロントエンド寄りの参加者が多かったからか「使うイメージが湧かない」といった声がちらほら…
ただし、フルスタックに開発している人は導入のメリットやデメリットまで踏み込めていた印象です。
GraphQLはクエリ言語かつランタイムの話だから当たり前といえば当たり前ですかね。笑
さいごに
初回から色んな疑問が飛び交っていたので会としてはまずまず良かったのかなと思います。
事前に触ってきた人はある程度深い議論をされてましたが、ドキュメントを読んだだけの人は割とフワッとしか捉えられていなさそうだなといった印象でした。
(私は今の現場で使っているのである程度イメージ出来ますが、最初はよくわからなかったなぁ。)
次回は実際の環境を構築して触りながら学習する場にシフトしようと思います！
以上。最後までご覧いただきありがとうございます！
