I am trying to cancel any previous / pending requests, if they are taking too long and the user navigates to another component, currently the query takes in a state value, and when it changes the component re-renders which is fine and the desired behaviour. However looking in the network tab the requests are still pending. Is there a way in react query to cancel any previous requests. I have attempted the query cancel based on the docs but its not correct as it's not cancelling.
const [value, setValue] = React.useState<boolean>(false);
const getData = async (value: number): Promise<any> => {
const CancelToken = axios.CancelToken
const source = CancelToken.source()
const response = await axios.get(`https://xxxxxx?value=${value}`, {
cancelToken: source.token,
}).then(res => res.data);
if (CancelToken) {
response.cancel = () => {
source.cancel('Query was cancelled by React Query')
}
}
return response;
}
const { data: result, status, error, isFetching }: any = useQuery(['getData', value], () => getData(value),
{
refetchOnWindowFocus: false,
}
);
You cannot attach .cancel to a promise in an async functions because async functions will always return a new Promise without the cancel function you attached. If you want to attach a cancel functions, it's best to use promise chaining instead of async functions.
Even better, react-query supports cancellation now by providing an AbortSignal out of the box, which you only need to attach to your request.
with axios 0.22+ and react-query v3.30+, you can do:
const query = useQuery('key', ({ signal }) =>
axios.get('/xxxx', {
signal,
})
)
with that, react-query will cancel the network request of your query if the query becomes unused or if you call queryClient.cancelQueries('key'), e.g. when the user clicks a button.
You need to throw out an error based on the response in your getData(). React-Query will catch that error and trigger the onError event.