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