React-Query自定义Hook禁用查询后后台更新失效问题咨询

No, setting enabled: false on your useQuery doesn’t break all background data fetching—it just prevents the query from running automatically when the component mounts or when its dependencies change. The query itself is still fully functional; you can manually trigger it or have your mutation prompt it to refresh the data.

Why your current setup isn’t updating fetchTodos after createTodo #

Your mutation does a great job with the optimistic update (immediately adding the new todo to the cache), but you’re missing a key step: telling React Query to sync the cache with the server after the mutation succeeds. Since you’ve set enabled: false, the query won’t refetch automatically in the background unless you explicitly trigger it. Right now, after the server creates the todo, your cache has the optimistic update but never gets the fresh, server-generated data (like the todo’s ID if the server assigns it).

How to fix it #

You need to add an onSuccess (or onSettled) handler to your mutation to either refetch the fetchTodos query or invalidate it. Here are two straightforward approaches:

Option 1: Manually refetch the query

Since you already have access to the fetchTodos query object (which includes a refetch method), you can call it directly in the mutation’s onSuccess handler:

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); 
      },
      // Add this onSuccess handler to refresh data
      onSuccess: () => {
        fetchTodos.refetch();
      },
      // Optional: Explicitly handle errors to roll back the optimistic update
      onError: (error, newItem, rollback) => {
        if (rollback) rollback();
      }
    }), 
  }; 
}

Option 2: Invalidate the query cache

If you prefer, you can use queryCache.invalidateQueries to mark the fetchTodos query as stale. Note that this will only trigger a refetch if the query is later enabled (e.g., if you call fetchTodos.refetch() or set enabled: true elsewhere). For your disabled query, combining this with a manual refetch ensures the cache stays in sync:

onSuccess: () => {
  queryCache.invalidateQueries('fetchTodos');
  fetchTodos.refetch();
}

Key Takeaway #

enabled: false is a great option when you want to control exactly when a query runs (like triggering it on a button click), but it doesn’t block interactions with the query cache or prevent mutations from triggering refetches. The missing piece in your code was explicitly telling React Query to refresh the data after the mutation succeeded.

内容的提问来源于stack exchange，提问作者DoomageAplentty