🐶

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

2023/03/06に公開

背景

例えばTODOアプリを想定したときに、TODOの追加に合わせてTODOリストを更新（再取得）したいということがあります。
データを変更（TODOを追加）したときに、それにともなう別のデータ（TODOリスト）を更新しないとViewが古くなってしまう一例です。

useMutationのonSuccessでinvalidateQueriesを実行する

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

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

const queryClient = useQueryClient();

const todos = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })

const mutation = useMutation({
  mutationFn: addTodo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] });
  },
})

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

ちなみにですが、invalidateQueriesに指定するクエリは、複数のクエリを部分一致でマッチさせることもできます。
以下の例では、todosという接頭辞を使って、todosで始まるクエリのキャッシュが古くなったとみなすことができます。

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

const queryClient = useQueryClient()

queryClient.invalidateQueries({ queryKey: ['todos'] })

// Both queries below will be invalidated
const todoListQuery = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
})
const todoListQuery = useQuery({
  queryKey: ['todos', { page: 1 }],
  queryFn: fetchTodoList,
})

参考

GitHubで編集を提案

背景

useMutationのonSuccessでinvalidateQueriesを実行する

参考

Discussion