Query Cancellation

Previous method requiring a cancel function

React 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 this is that it allow you to continue to use normal async/await syntax while getting all the benefits of automatic cancellation. Additionally, this solution works better with TypeScript than the old solution.

The AbortController API is available in most runtime environments, but if the runtime environment does not support it then the query function will receive undefined in its place. You may choose to polyfill the AbortController API if you wish, there are several available.

Using fetch

1 const query = useQuery('todos', async ({ signal }) => {
2   const todosResponse = await fetch('/todos', {
3     // Pass the signal to one fetch
4     signal,
5   })
6   const todos = await todosResponse.json()
7 
8   const todoDetails = todos.map(async ({ details } => {
9     const response = await fetch(details, {
10       // Or pass it to several
11       signal,
12     })
13     return response.json()
14   })
15 
16   return Promise.all(todoDetails)
17 })

Using axios

Using axios v0.22.0+

1 import axios from 'axios'
2 
3 const query = useQuery('todos', ({ signal }) =>
4   axios.get('/todos', {
5     // Pass the signal to `axios`
6     signal,
7   })
8 )

Using an axios version less than v0.22.0

1 import axios from 'axios'
2 
3 const query = useQuery('todos', ({ signal }) => {
4   // Create a new CancelToken source for this request
5   const CancelToken = axios.CancelToken
6   const source = CancelToken.source()
7 
8   const promise = axios.get('/todos', {
9     // Pass the source token to your request
10     cancelToken: source.token,
11   })
12 
13   // Cancel the request if React Query signals to abort
14   signal?.addEventListener('abort', () => {
15     source.cancel('Query was cancelled by React Query')
16   })
17 
18   return promise
19 })

Using XMLHttpRequest

1 const query = useQuery('todos', ({ signal }) => {
2   return new Promise((resolve, reject) => {
3     var oReq = new XMLHttpRequest()
4     oReq.addEventListener('load', () => {
5       resolve(JSON.parse(oReq.responseText))
6     })
7     signal?.addEventListener('abort', () => {
8       oReq.abort()
9       reject()
10     })
11     oReq.open('GET', '/todos')
12     oReq.send()
13   })
14 })

Manual Cancellation

You might want to cancel a query manually. For example, if the request takes a long time to finish, you can allow the user to click a cancel button to stop the request. To do this, you just need to call queryClient.cancelQueries(key). If promise.cancel is available or you have consumed the signal passed to the query function then React Query will cancel the request.

1 const [queryKey] = useState('todos')
2 
3 const query = useQuery(queryKey, await ({ signal }) => {
4   const resp = fetch('/todos', { signal })
5   return resp.json()
6 })
7 
8 const queryClient = useQueryClient()
9 
10 return (
11   <button onClick={(e) => {
12     e.preventDefault()
13     queryClient.cancelQueries(queryKey)
14    }}>Cancel</button>
15 )

Old cancel function

Don't worry! The previous cancellation functionality will continue to work. But we do recommend that you move away from the withdrawn cancelable promise proposal to the new AbortSignal interface which has been stardardized as a general purpose construct for aborting ongoing activities in most browsers and in Node. The old cancel function might be removed in a future major version.

To integrate with this feature, attach a cancel function to the promise returned by your query that implements your request cancellation. When a query becomes out-of-date or inactive, this promise.cancel function will be called (if available).

Using axios with cancel function

1 import axios from 'axios'
2 
3 const query = useQuery('todos', () => {
4   // Create a new CancelToken source for this request
5   const CancelToken = axios.CancelToken
6   const source = CancelToken.source()
7 
8   const promise = axios.get('/todos', {
9     // Pass the source token to your request
10     cancelToken: source.token,
11   })
12 
13   // Cancel the request if React Query calls the `promise.cancel` method
14   promise.cancel = () => {
15     source.cancel('Query was cancelled by React Query')
16   }
17 
18   return promise
19 })

Using fetch with cancel function

1 const query = useQuery('todos', () => {
2   // Create a new AbortController instance for this request
3   const controller = new AbortController()
4   // Get the abortController's signal
5   const signal = controller.signal
6 
7   const promise = fetch('/todos', {
8     method: 'get',
9     // Pass the signal to your request
10     signal,
11   })
12 
13   // Cancel the request if React Query calls the `promise.cancel` method
14   promise.cancel = () => controller.abort()
15 
16   return promise
17 })