TanStack Queryでデータの変更に合わせて別のデータを再取得する

背景

例えばTwitterのようなSNSアプリを想定したときに、ツイートに合わせてツイート一覧を更新（再取得）したいということがあるかもしれません。
データ（ツイート）を変更したときに、それにともなう別のデータ（ツイート一覧）を更新しないとViewが古くなってしまう一例です。

useMutationのonSuccessでinvalidateQueriesを実行する

invalidateQueriesメソッドを実行することでキャッシュが古くなったとみなし、データを再取得することができます。
これをuseMutationのonSuccessメソッドと組み合わせることで、ツイートに合わせてツイート一覧を再取得することができます。

import { useMutation, useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

const tweetList = useQuery({ queryKey: ['tweet-list'], queryFn: fetchTweetList })

const mutation = useMutation({
  mutationFn: postTweet,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['tweet-list'] });
  },
})

postTweetが成功したときにtweet-listというキーが指定されたクエリを再取得します。

参考

https://tanstack.com/query/v4/docs/react/guides/invalidations-from-mutations