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]

所以当我删除 todo 并调用onSuccess此代码时queryCache.getQueryData<any>('todos');，它会返回我undefined- 因为 QueryKey 还包含此页码。

我该如何解决？使用分页的 QueryKey 修改查询数据。

Answer 1

要直接回答您的问题，您可以提供更具体的密钥getQueryData：

queryCache.getQueryData<any>(['todos', page]);

请注意，在分页中手动删除会产生移位问题：

const paginatedTodos = [ [1, 2], [3, 4], [5, 6] ];
deleteTodoId(3);
// you would get [ [1, 2], [4], [5, 6] ]
// instead of    [ [1, 2], [4, 5], [6] ]

您可以尝试修复页面中的“漏洞”，但为了避免任何不一致，最好简单地使所有查询无效todos以与服务器上的实际数据重新同步。