How to wait for the invalidation of requests in the onSuccess event?

[ShimaginAndrey]

I have a mutation hook usePatchAction and invalidations of two requests 'test1', 'test2'

const usePatchAction = () => { const client = useQueryClient(); return useMutation( 'patchAction', ({ payload }) => apiClient(patchAction, { body: payload }), { onSuccess: () => { client.invalidateQueries('test1'); client.invalidateQueries('test2'); }, }, ); };

Inside the react component, I call the mutate method and create a subscription for the successful execution of the request.

const Component = () => { const [showSendSuccesModal, setShowSendSuccesModal] = useState(false); const { mutate, isLoading} = usePatchAction(); return <button onClick={() => { mutate({ onSuccess: () => { setShowSendSuccesModal(true); }, }) }}>Click</button> }

Question. How to execute the code inside onSuccess synchronously (you need to open a modal window), but wait for the cancellation of two requests ('test1', 'test2') in order to receive current data through client.getQueryData('test1'); client.getQueryData('test2');? If I do not wait for the disability inside the usePatchAction hook, I will receive outdated data

[TkDodo]

1. you shouldn't need to use client.getQueryData in a component - that's what useQuery is for, it will re-render when data changes

2. you can await the promise from invalidateQueries

onSuccess: () => return Promise.all([client.invalidateQueries('test1'), client.invalidateQueries('test2')])