javascript - react-query - 带分页的 getQueryData 和 setQueryData

Question

我有一些资源，我们称之为todos .
我有它的列表，用户可以从列表中删除。
在我实现看起来像的 paginaiton 之前

const {data} = useQuery('todos', fetchTodos)

在我删除它的其他地方

  const [deleteTodo, deletingMutation] = useMutation(
    (id) => deleteTodo(id),
    {
      onSuccess: (data, deletedTodoId) => {
        const { todos } = queryCache.getQueryData<any>('todos');

        queryCache.setQueryData('todos', {
          todos: todos.filter(todo=>todo.id !== deletedTodoId),
        });
      },
    });

所以在其他地方我只是修改了这个名为 'todos' 的数据集
但是在我实现了 paginaiton 之后，事情变得更加复杂了，因为 QueryKey 现在不仅仅是 'todos'但它是 ['todos', page]所以当我删除待办事项并调用 onSuccess此代码 queryCache.getQueryData<any>('todos'); ，它返回我 undefined - 因为 QueryKey 还包含此页码。
我应该如何解决？使用分页的 QueryKey 修改查询数据。

Answer 1

我想我为时已晚，但我遇到了同样的问题并想分享我的解决方案(虽然它有点 hacky)
我写了一个返回所有相关缓存键的函数

const getRelatedCacheKeys = (queryClient, targetKey) => {
  return queryClient.getQueryCache().getAll()
    .map(query => query.queryKey)
    .filter(key => Array.isArray(key) ? key.includes(targetKey) : key === targetKey)
}

然后我为所有相关键调用 setQueryData 函数。

 onSuccess: data => {
   const keys = getRelatedCacheKeys(queryClient, 'key')
   keys.forEach(key => {
     queryClient.setQueryData(key, old => updateFn(old, data))
   })
 }

但是简单地使缓存无效的选项似乎更实用

onSuccess: () => queryClient.invalidateQueries('key')

使用此解决方案，所有相关 key 也会失效