SWR->TanStack Queryに移行する？

[takecchi]

関連Issue

概要

APIとの通信やキャッシュ、状態管理をSWRで行っているが、
SWRを使って丸めた箇所(swr/client配下)の見通しは悪い気がした。
(コンポーネント使用箇所はかなり見やすいと思うけど)

ReactQueryにした時にどう変わるか、変わった結果移行するのか含めて検証を行いたい

[takecchi]

https://npmtrends.com/@tanstack/react-query-vs-swr

[takecchi]

比較記事
https://zenn.dev/aishift/articles/288e4470cfc45e

[takecchi]

こんな感じで書いていいみたい

useQuery({
    queryKey: ['todos', todoId],
    queryFn: () => fetchTodoById(todoId),
  })

https://tanstack.com/query/latest/docs/framework/react/guides/query-keys#if-your-query-function-depends-on-a-variable-include-it-in-your-query-key

[takecchi]

npm i -D @tanstack/eslint-plugin-query

[takecchi]

双方向無限リスト出来る。いいね
https://tanstack.com/query/v5/docs/framework/react/guides/infinite-queries#what-if-i-want-to-implement-a-bi-directional-infinite-list

[takecchi]

比較記事
https://zenn.dev/cybozu_frontend/articles/a735baacc09c6a

[takecchi]

https://tanstack.com/query/v5/docs/framework/react/reference/useQuery

[takecchi]

SWRのdedupingIntervalに当たる設定はstaleTime

[takecchi]

queryFnでUndefinedを返却することは出来ない。(反映されない)
TanStack/query#4964

isErrorで判定する必要あり

[takecchi]

useMutationを使って特定のキャッシュを更新させたい場合
https://tanstack.com/query/v5/docs/framework/react/guides/updates-from-mutation-responses

[takecchi]

タブを再フォーカスした際に、一度実行に失敗したクエリを再実行する為、以下のような問題が発生する。

1. アカウント作成ページでメールアドレス入力まで行う
2. 確認メールが来るのでタブを切り替えてgmailを確認
3. 再度アカウント作成ページに戻ると画面が最初からになっている
   (isLoadingがtrueになることで画面がリセットされるため)

この問題を解決するためのissue
TanStack/query#3565

[takecchi]

フェッチ結果が同じでも再レンダリングされる？

再レンダリングをさせたいプロパティだけ個別で設定しないといけないぽい...？
TanStack/query#840

もしその場合は正直SWRに軍配上がりそう

[takecchi]

SWRのように比較してくれないみたい

[takecchi]

データが同じだった場合は再レンダリングされないのが正しい挙動？
TanStack/query#1864
よくわからない

[takecchi]

https://tanstack.com/query/v5/docs/framework/react/reference/useQuery

By default, access to properties will be tracked, and the component will only re-render when one of the tracked properties change.

notifyOnChangePropsのデフォルトはtrackedになっていて、SWRと同じように使用しているプロパティを自動で検知して再レンダリングを抑制してくれるらしい。

効いてない感じするけど

[takecchi]

Date型がよくないっぽい
TanStack/query#6482

[takecchi]

    structuralSharing: (oldData, newData) => {
      if (JSON.stringify(oldData) === JSON.stringify(newData)) {
        return oldData;
      }
      return newData;
    },

これで解決。デフォルトでやってくれないものだろうか
QueryClientのインスタンス生成時にdefaultOptionsを設定できた。

SWRはハッシュ化して比較しているのでそれに習ってみる
https://github.com/vercel/swr/blob/e81d22f4121743c75b6b0998cc0bbdbe659889c1/_internal/utils/config.ts#L40-L41

npmパッケージとして公開されていたのでこれを使用する。
https://github.com/shuding/stable-hash

[takecchi]

総評

Good

• SWRとほぼ変わらない使用感
• useMutationの使用感はuseSWRMutationよりも優れている
• queryFnの引数がシンプルでわかりやすい

Bad

• Middlewareがサポート対象外

[takecchi]

使用感はかなり良かったし、SWRと比べて可読性も良い。
しかしタイムライン取得用のカスタムHookを作ろうとした際にMiddlewareがサポート対象外であることが判明。

なんとか出来なくもなさそうだが、設計と実装に割く余力が無いため今回は断念。
個人的にはライブラリのサイズ増やしてでもTanstackQueryを採用する価値はあると思う。

次回の為にブランチは残しておく
https://github.com/takecchi/cuculus/tree/feature/use-tanstack-query