React QueryのSolid.js版の話。
`@tanstack/solid-query`の最新のリリースバージョンは`4.x`系で、近いうちにv5が出るって感じ。
時期尚早では？
って思うかもしれないが、実はv4のSolid Queryには、`Suspense`コンポーネント配下ではまともに動かないという（個人的には致命的な）バグがあり・・。
[solid] Refetching query inside <Suspense> resets focus · Issue #5010 · TanStack/query · GitHub
そういうわけで、まだリリース前ではあるものの、ほぼほぼ仕上がってるv5に移行した。
移行ログ
まずはインストールで、`npm i @tanstack/solid-query@alpha`する。
メモっておくべきコードの書き直しポイントとしては以下。
基本のシグネチャ
ナイスなアプデ。
// v4 const query = createQuery({ queryKey: () => ['todos', tId()], queryFn: () => fetchTodo(tId()), get enabled() { return tId() !== null; }, }); // v5 const query = createQuery(() => ({ queryKey: ['todos', tId()], queryFn: () => fetchTodo(tId()), enabled: tId() !== null, }));
というように、全体が関数でラップされるようになって、個別に関数にする必要がなくなることで、よりSolidらしくかけるようになった。
`createMutation()`も同様。
`status`と`fetchStatus`
データの取得中にローディング表示を出したりするためのフラグまわりが一新された。
stale-while-revalidate的な挙動の裏には、
- クエリとしてのステータス
- fetch処理のステータス
この2つを区別して組み合わせる必要があるのでこうなったと。
- `isPending`(元`isLoading`): データの有無に関わらずロード中
- `isLoading`(元`isInitialLoading`): `isPending && isFetching`で、データが無い最初のロード中
ステータスはデータの有無に関するフラグ、fetchのステータスは、`queryFn`の実行状態に関するフラグってこと。
- `isFetching`: 実際にfetchしてる中
- `isRefetching`: refetchしてる中
Mutationの場合も、`isLoading`が`isPending`に変更された。
ロード中も前のデータを残しておくやつ
ページングのUIなんかで使いたいアレ。
// v4 createQuery({ // ... keepPreviousData: true, }); // v5 import { keepPreviousData } from "@tanstack/solid-query"; createQuery(() => ({ // ... placeholderData: keepPreviousData, // or placeholderData: (prev) => prev, }));
これだけ。