query-invalidation

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

invalidateQueries marks queries stale and triggers background refetch

When a query is invalidated with invalidateQueries, two things happen: it is marked as stale (which overrides any staleTime configurations), and if the query is currently being rendered via useQuery or related hooks, it will be refetched in the background.

invalidateQueries basic usage

The QueryClient has an invalidateQueries method. Call queryClient.invalidateQueries() with no arguments to invalidate every query in the cache. Pass queryKey option to invalidate queries matching a prefix: queryClient.invalidateQueries({ queryKey: ['todos'] }) invalidates all queries with keys starting with 'todos'.

invalidateQueries with queryKey prefix matching

When you pass queryKey: ['todos'] to invalidateQueries, it matches all queries that start with 'todos' in their key. For example, both useQuery({ queryKey: ['todos'], ... }) and useQuery({ queryKey: ['todos', { page: 1 }], ... }) will be invalidated.

invalidateQueries with specific query variables

You can invalidate queries with specific variables by passing a more specific query key. For example, queryClient.invalidateQueries({ queryKey: ['todos', { type: 'done' }] }) will only invalidate queries with that exact key, and will NOT invalidate queryKey: ['todos'] without the variable object.

invalidateQueries exact: true option

Pass exact: true to invalidateQueries to match only queries with that exact key, with no additional subkeys. For example, queryClient.invalidateQueries({ queryKey: ['todos'], exact: true }) will invalidate only useQuery({ queryKey: ['todos'], ... }) but NOT useQuery({ queryKey: ['todos', { type: 'done' }], ... }).

invalidateQueries with predicate function

Pass a predicate function to invalidateQueries for fine-grained control. The function receives each Query instance and should return true or false to indicate whether that query should be invalidated. For example: queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === 'todos' && query.queryKey[1]?.version >= 10 })

TanStack Query uses targeted invalidation instead of normalized cache updates

Unlike other libraries that use normalized caches and attempt to update local queries imperatively or via schema inference, TanStack Query prescribes targeted invalidation, background-refetching, and atomic updates to avoid the manual labor of maintaining normalized caches.

invalidateQueries API supports partial query matching

The invalidateQueries API (and related APIs like removeQueries) support partial query matching. You can match multiple queries by their prefix, match an exact query, or use Query Filters for different types of filtering options.

Query invalidation pattern after mutation

After a successful mutation, use queryClient.invalidateQueries() with the queryKey to invalidate cached queries, causing them to refetch automatically.

Give your agent this brain