Query Invalidation SOMETIME occurs before mutation completion when running local server

[Yasin-97]

When I invalidate a query after updating an item through a mutation while running my own server locally, I notice that the GET API call happens before the PUT API call has completed (looking into browser's network tab). I expect the PUT request to complete first, followed by the GET request to fetch the updated data.

Steps to reproduce the behavior:

1. Set up a local server to handle GET and PUT requests.
2. Define a mutation with the onSuccess callback to invalidate the query after the mutation is successful.
3. Use the mutation in a component to update an item.
4. Observe the network requests in the browser's network tab.

API functions

const fetchItems = async () => {
  const { data } = await axios.get('http://localhost:3001/items');
  return data;
};

const updateItem = async (updatedItem) => {
  const { data } = await axios.put(`http://localhost:3001/items/${updatedItem.id}`, updatedItem);
  return data;
};

Custom hook for fetching and updating items

export const useItems = () => {
  return useQuery({
     queryKey: ["items"], 
     queryFn: fetchItems
  });
};

export const useUpdateItem = () => {
  return useMutation({
    mutationFn: updateItem ,
    onSuccess: (res) => {
      queryClient.invalidateQueries({ queryKey: ["items"] });
    },
  });
};

Expected behavior
The PUT request should complete first, and then the GET request should be triggered to fetch the updated data.

This issue only occurs when running my own server locally. When using other environments, the requests happen in the expected order.

how this happens?

[TkDodo]

it's technically not possible that the invalidation happens before the mutation finished with the shown code. it's more likely that something else triggers a refetch in between, e.g. a window focus. I can only look into this if you show a minimal reproduction