---
id: query-cancellation
track: learn
product: query
locale: en
order: 13
revision: 2
sourceCheckedOn: "2026-08-03"
versionRange: "Query ^5"
verifiedAgainst: "@tanstack/react-query@5.101.4"
contentModel: 2
prerequisites:
  - "queryKey, queryFn, and cache-state basics"
sourceRefs:
  - "https://tanstack.com/query/latest/docs/framework/react/guides/query-cancellation"
  - "https://tanstack.com/query/latest/docs/framework/react/guides/query-functions"
---

# Propagate Query cancellation to the network

> Consume the AbortSignal supplied to queryFn so obsolete fetches stop and cancellation state remains predictable.

**Outcome:** Pass one signal through related requests, distinguish unmounting from actual cancellation, and recognize the Suspense limitation.

## Receiving a signal does not automatically abort the network

Query supplies an AbortSignal to queryFn, but an unused request may still complete and populate the cache by default. Cancellation aborts the promise and restores prior Query state only when the request layer consumes the signal.

## Carry one signal through the whole request chain

Native fetch accepts signal directly. Check response.ok before parsing JSON, and pass the same signal to every related request made by one queryFn so only part of the chain is not left running.

> **Note:** The current official guide notes that this cancellation behavior does not work with the Suspense query hooks.

File: `src/features/issues/queries.ts`

```ts
import { queryOptions } from '@tanstack/react-query'

export const issuesOptions = queryOptions({
  queryKey: ['issues', 'list'] as const,
  queryFn: async ({ signal }) => {
    const response = await fetch('/api/issues', { signal })
    if (!response.ok) throw new Error('Unable to load issues')
    return response.json()
  },
})
```

## Practice and verification

### Completion checkpoint

One Query AbortSignal reaches the entire request chain, stopping obsolete I/O without disguising cancellation as success.

### Exercise

Cancel the previous detail request during rapid issue switching and handle AbortError differently from a network failure.

### Verification

Switch routes rapidly on a slow network; the old request should cancel, the new one should finish, and empty data should not flash.

### Common pitfalls

- Receiving signal without passing it to fetch.
- Catching cancellation and returning an empty array, causing Query to report success.

## Official sources

- https://tanstack.com/query/latest/docs/framework/react/guides/query-cancellation
- https://tanstack.com/query/latest/docs/framework/react/guides/query-functions