rare-sapphire

Cancel Axios POST request using useQuery + source.token

I'm in the process of migrate our old way of fetching data to RQ and I'm having issues when I'm trying to cancel the previous/duplicate request using the CancelToken from Axios. I'm applying the same solution/code than the docs and even we use the same way in our previous implementations but it doesn't work with RQ as expected. Is there any known issue regarding this two tools. I've checked on Stack Overflow and those answer didn't feet my system's necessities.

...
queryFn: () => {
  const token = axios.CancelToken.source().token;
  getData(param, token);
}

...
queryFn: () => {
  const token = axios.CancelToken.source().token;
  getData(param, token);
}

and basically what I'm doing on my getData function is a axios.post(ulr, { ...values}, { cancelToken: token })

6 Replies

metropolitan-bronze•3y ago

with axios >= 0.22, you can do:

  queryFn: ({ signal }) =>
    axios.get('/todos', {
      // Pass the signal to `axios`
      signal,
    }),

  queryFn: ({ signal }) =>
    axios.get('/todos', {
      // Pass the signal to `axios`
      signal,
    }),

no canceltoken needed

rare-sapphireOP•3y ago

Yeah, I saw it but for the moment I can't upgrade axios from the old version so I need to find the way to cancel the previous request or drop RQ :/

metropolitan-bronze•3y ago

i don't envy you. axios 0.22 came out ~2 years ago 😂

metropolitan-bronze•3y ago

but we also have docs for old axios: https://tanstack.com/query/v4/docs/react/guides/query-cancellation#using-axios-with-version-lower-than-v0220 are you saying you're doing exactly that and it doesn't work ?

Query Cancellation | TanStack Query Docs

TanStack Query provides each query function with an AbortSignal instance, if it's available in your runtime environment. When a query becomes out-of-date or inactive, this signal will become aborted. This means that all queries are cancellable, and you can respond to the cancellation inside your query function if desired. The best part about th...

rare-sapphireOP•3y ago

Yes and I can still trigger multiple request without been cancelled 🤔 for the rest of the requests of the system where we are still using the previous way of fetching (useEffect + promises) the cancel token works as charm weird

metropolitan-bronze•3y ago

I can take a look if you show a minimal codesandbox reproduction; are you sure the queries become unused? do you have all dependencies in the queryKey ?

Gaming

Programming

Cancel Axios POST request using useQuery + source.token

Did you find this page helpful?