React-Query 和查询无效问题

Question

我真的不知道如何清楚地询问，但是，我会先粘贴我的代码并在下面询问。

function useToDos() {
  const queryCache = useQueryCache();
  const fetchTodos = useQuery(
    'fetchTodos',
    () => client.get(paths.todos).then(({ data }: any) => data),
    { enabled: false }
  );

  const createTodo = async ({ name ) =>
    await client.post(paths.todos, { name }).then(({ data }) => data);

  return {
    fetchTodos,
    createTodo: useMutation(createTodo, {
      onMutate: newItem => {
        queryCache.cancelQueries('fetchTodos');
        const previousTodos = queryCache.getQueryData('fetchTodos');
        queryCache.setQueryData('fetchTodos', old => [
          ...old,
          newItem,
        ]);
        return () => queryCache.setQueryData('fetchTodos', previousTodos);
      },
    }),
  };
}

如您所见，我正在尝试创建自己的自定义挂钩来包装反应查询功能。因此，我需要将fetchTodos查询设置为禁用，这样它就不会立即运行。但是，这会破坏所有后台数据获取吗？

具体来说，当我运行createTodo并且onMutate方法触发时，我理想地希望fetchTodos在后台更新查询，以便更新前端的待办事项列表，而无需再次发出请求。但似乎查询最初设置为禁用，后台更新不会生效。

由于我不认为将反应查询挂钩包装到自定义挂钩库中是一个非常好的主意，因此我可能会对相同的设置有更多疑问，但现在我将从这里开始。谢谢。

Answer 1

突变不会自动触发重新获取。使用react-query 实现此目的的方法是通过queryCache.invalidateQueries在突变后使缓存无效。来自文档：

invalidateQueries 方法可用于根据查询键或查询的任何其他功能上可访问的属性/状态使缓存中的单个或多个查询无效并重新获取。默认情况下，所有匹配的查询都会立即标记为过时，并且活动查询会在后台重新获取。

因此，您可以将其配置useMutation为在突变解决时使查询无效。例子：

function useToDos() {
  const queryCache = useQueryCache();
  const fetchTodos = useQuery(
    'fetchTodos',
    () => client.get(paths.todos).then(({ data }: any) => data),
    { enabled: false }
  );

  const createTodo = async ({ name ) =>
    await client.post(paths.todos, { name }).then(({ data }) => data);

  return {
    fetchTodos,
    createTodo: useMutation(createTodo, {
      onMutate: newItem => {
        queryCache.cancelQueries('fetchTodos');
        const previousTodos = queryCache.getQueryData('fetchTodos');
        queryCache.setQueryData('fetchTodos', old => [
          ...old,
          newItem,
        ]);
        return () => queryCache.setQueryData('fetchTodos', previousTodos);
      },

      onSettled: () => {
        cache.invalidateQueries('fetchTodos');
      }

    }),
  };
}