Closed7
next-urqlを使ってNext.js環境でSuspenseを試してみる
mu-sukeゴール
- next-urqlでNext.js環境でSuspenseを試せるかどうかがわかること
課題点
- どのタイミングでSSRが起きているのかの理解が甘い
環境
| ツール・ライブラリ | 用途 | バージョン |
|---|---|---|
| Next.js | フロントエンドとして利用 | 12.1.6 |
| NestJS | サーバーサイドとして利用 | 8.0.0 |
| GraphQL Code Generator | コード自動生成ツール | 2.6.2 |
| URQL | GraphQL Clientのライブラリ | 2.2.0 |
| node.js | フロント、サーバーサイドの実行環境 | v16.14.0 |
mu-suke参考にしていた記事はこれ
mu-sukeSuspenseのfallbackが表示されない
mu-suke色々調べているが、かつては@urql/exchange-suspenseを使って実装していたっぽい
しかしなぜか現在はdeprecatedになっている
明日はなんで？ってとこから
mu-suke同じ人がいた
mu-suke結論
現時点でurqlではSuspenseのfallbackを表示することはできない
理由としては以下
executeQuery()実行時はまずキャッシュからデータを返して裏でサーバーに問い合わせるようで、おそらくそのせいでSuspenseが効かない(ローディング状態にならない)。
こちらの記事から引用
mu-sukeシンプルにNext.jsでSuspenseが使えなかったが、この記事と同じ対応をして解決した
このスクラップは2022/06/09にクローズされました