😃

[TanStack Query] 再取得

2023/08/17に公開

概要

tanstackqueryを使ってデータを再取得する方法です。
主な使用用途は画面にすぐ反映したいときです。

useQueryを使うことでrefetchが使えるようになります

const { data, refetch } = useQuery(['query'], getFunc, options)

const myFunc = async ()=> {
  await refetch()
}

myFuncを実行することで、dataが更新されます。ただこれの場合は必ずrefetchを変数として持たないといけないので使い勝手が悪い場合があります。

にある通り、invalidateQueriesを使う。

const queryClient = useQueryClient()

const myFunc = async ()=> {
  await queryClient.invalidateQueries('query')
}

こうすることで、別のhookにuseQueryが書かれたとしてもそのdataが更新されます。

その他にもuseOptimisticMutationという方法があります

を参考にしてください