SPAとRelayを組み合わせてルーティングと連携してクエリ発行したい
問題意識
Relayの usePreloadedQuery フックの効力を最大限に発揮したい。 調べたこと
Foundは状態管理にReduxを使うルーターライブラリで、デフォルトでデータのpreloadに対応していそうな作りに見える。が、↓の記事ではやっぱりrender-as-you-fetchになってない、と指摘されている。 記事中ではreact-routerやfound以外にもいろいろなライブラリを組み合わせる例について取り上げつつも、最終的な結論は、2021/6/7 時点ではrelay-examplesのサンプルコードにあるルーターの実装を流用してメンテナンスしていくのが一番マシでしょう、ということになっている。
I think right now the best idea is to use the Router in the Issue Tracker example and maintain it yourself. This isn't a great solution, but it seems to be the only way forward for now.
そもそもreact-router単体ではrender-as-you-fetchを実現できない、ということにも触れられていそう (loadQuery 関数をrender時に呼び出さざるを得ないので)。 Foundもよいように見えつつrender-as-you-fetchになっていないらしい。
感想
relay-examplesのルーター部分をreact-relay-routerライブラリとして切り出してほしい。けど名前が紛らわしいと思う。
render-as-you-fetchに対応していて枯れたルーティングライブラリが存在しないので、やりたくなったら自前で頑張るのが 2021/8/29 時点の最速なんだなあ。そもそもrender-as-you-fetch自体がまだ枯れてない考え方なのでそういうものかもしれない。relay-examplesが独自のルーターを実装していることからも読み取れそうだった。
パフォーマンスがそんなに重要じゃないなら、ルーティングと連携するのを諦めてコンポーネント内で useLazyLoadQuery フックを使うのが手っ取り早そう。
Facebookの開発チームにエールを送ることにする。