🧊

Solid Queryを先んじてv5にしたときのメモ

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,
}));

これだけ。

まとめ

他にも、`focus`イベントでrefetchしてたのが`visibilitychange`イベントに変わったので、DevToolsを行き来するたびにfetchしなくなってハッピー。

マイグレーションガイドはこちら。

Migrating to TanStack Query v5 | TanStack Query Docs

or

v5 Roadmap 🗺 · TanStack/query · Discussion #4252 · GitHub

基本のAPIについては、Reactのページを見て類推するままやけど、そこはまあ仕方ない・・。

無事にこのままリリースされますように!