TanStack Query · Reference · all subjects

querycache

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

QueryCache constructor options

QueryCache accepts three optional options: onError (error: unknown, query: Query) => void called when a query encounters an error; onSuccess (data: unknown, query: Query) => void called when a query is successful; onSettled (data: unknown | undefined, error: unknown | null, query: Query) => void called when a query is settled (either successful or errored).

QueryCache.find method

queryCache.find is a synchronous method that retrieves an existing query instance from the cache. It accepts options with a filters parameter of type QueryFilters (containing queryKey of type QueryKey). It returns a Query instance from the cache, or undefined if the query does not exist. This method provides access to all query state and underlying implementation details.

QueryCache.findAll method

queryCache.findAll is a synchronous method that retrieves existing query instances from the cache that partially match a query key. It accepts options with an optional filters parameter of type QueryFilters. It returns a Query array. If queries do not exist, an empty array is returned.

QueryCache.subscribe method

queryCache.subscribe registers a callback function to be notified of updates to the query cache. The callback receives a QueryCacheNotifyEvent and is called when the cache is updated via tracked mechanisms like query.setState or queryClient.removeQueries. The subscribe method returns an unsubscribe function that removes the callback from the query cache.

QueryCache.clear method

queryCache.clear clears the entire cache and starts fresh. It accepts no parameters.

QueryCache usage recommendation

Normally, you will not interact with the QueryCache directly and instead use the QueryClient for a specific cache.

QueryCache example: basic instantiation and find

import { QueryCache } from '@tanstack/react-query' const queryCache = new QueryCache({ onError: (error) => { console.log(error) }, onSuccess: (data) => { console.log(data) }, onSettled: (data, error) => { console.log(data, error) }, }) const query = queryCache.find({ queryKey: ['posts'] })

QueryCache.subscribe example

const callback = (event) => { console.log(event.type, event.query) } const unsubscribe = queryCache.subscribe(callback)

Give your agent this brain