useMutation invalidating Queries

[deepikazuci]

`const queryClient = useQueryClient();

const {isLoading, data : User, isFetching} = useQuery('loan-data', usrAccountDetails )

const {data : responseDisableAutoPay, mutate : disableAutoPayButton} = useMutation(disableAutoPay, {
onSuccess : (data)=>{
console.log(data);
queryClient.invalidateQueries('loan-data');
}
});`

I am trying to post some data and invalidate the 'loan-data' query and display the new data onscreen. My Post request is working perfectly and I got a success message as well. But I am still getting the previous data and after couple of minutes, it changes automatically. But If I don't use React-Query, then everything is updating as expected. May I know where I am going wrong???

[TkDodo]

Please show a codesandbox reproduction

[deepikazuci]

Hi,

Thanks for the Reply.

But I found the solution.
I just have to configure the staleTime to a minute, Globally. I am using the same query in multiple places and since it is defaulted to zero, I got multiple requests flying at a minute for every onClick Events in my app. And hence my page takes the data from the cache which is essentially the old one since the new request takes way too long to finish the request.

[Sinahdalir]

Hi,

I have a similar issue where I have a custom hook that returns useMutate(...). But when I invalidate on onSuccess, the data doesn't rerender on my page.

`function useEdit() {
const queryClient = useQueryClient();
const { data: visit } = useData();
const axios = useCustomAxiosInstance();

return useMutation(
(fields) => {
axios.put(
visits/${visit.id},
{
params...
}
);
},
{
onSuccess: () => {
queryClient.invalidateQueries(['visits', visit.id]);
},
}
);
}`

After refocus on the page the data is correct with the new data, but before that It doesn't rerender with new data. I was looking at the queryClient object and it seems that the queryClient passed to onSuccess is older than what useQueryClient returns during onSuccess. When I manually invalidate using the dev tools it works as intended but using invalidate on queryClient doesn't produce same results. Thanks in advance