I have a master page that is a list of items, and a details page where I fetch and can update an Item. I have the following hooks based upon the react-query library:

const useItems = (options) => useQuery(["item"], api.fetchItems(options)); // used by master page

const useItem = id => useQuery(["item", id], () => api.fetchItem(id)); // used by details page

const useUpdateItem = () => {

  const queryClient = useQueryClient();

  return useMutation(item => api.updateItem(item), {

    onSuccess: ({id}) => {

     queryClient.invalidateQueries(["item"]);

     queryClient.invalidateQueries(["item", id]);

   }

  });

};

The UpdatePage component has a form component that takes a defaultValue and loads that into it's local "draft" state - so it's sort of "uncontrolled" in that respect, I don't hoist the draft state.

// UpdatePage



const query = useItem(id);

const mutation = useUpdateItem();



return (

  {query.isSuccess && 

   !query.isLoading && 

   <ItemForm defaultValue={query.data} onSubmit={mutation.mutate} />

  }

);

The problem is after I update, go to Master page, then back to Details page, the "defaultValue" gets the old item before the query completes. I do see it hitting the API in the network and the new value coming back but it's too late. How do I only show the ItemForm after the data is re-queried? Or is there a better pattern?