GraphQL BatchでクライアントN+1を無理矢理倒す (事例紹介:株式会社ハウテレビジョン様)

株式会社ハウテレビジョン様で、 質問箱サービスMondのパフォーマンス分析と改善を行いました。 内容としてはLCPの内訳の計測、その解決方法の提案、そして一番大きな問題だった GraphQL リクエストの最適化という話になります。 現時点で全ての問題の修正には至っていませんが、開発的には全ての問題の内訳が認識可能になっていて、検証が終われば段階的にリリースできる、という状態です。 以下、敬称略 相談内容 mond.how のLighthouseスコアを改善してほしい 主要な技術構成 Next.js - Page Router Hasura CE - GraphQL Server Hasura のセルフホスティング版 計測と問題 最近は Chrome が出してくれる Lighthouse スコアの推移が見れるダッシュボードがある。 ここで Mond の直近のスコアをみる。 代表例として ht

[kiririmode]

GraphQLリクエストのバッチ化。

[syu-m-5151]

ほへー“ドメイン知識がないからこそ冷静にDevToolsのメトリクスと向き合えてる気はする。コードを読んでしまうと思い込みで重くない数字を見に行って失敗することがある。”

[yo_waka]

読み応えあった

[strawberryhunter]

複雑だなあ維持できるのかなという感想。タイトル通り無理矢理だった。まずN+1というライブラリの理解不足で生じた恥ずかしいバグを（会社が）直すのが正道だと思うが、根本的な設計変更が必要だったのだろう。

[clairvy]

“代表例として https://mond.how/kumagi を見ていた。回答数が多い。” なるほど

[udzura]

“コードを読んでしまうと思い込みで重くない数字を見に行って失敗することがある”

[dec123456789]

バッドノウハウ感があるので素直にバックエンドとDBにも手を入れたほうが良さそう。

[onk]

面白かった！

[sonots]

フロントエンドチューニングだ

[mizchi]

書いた