TanStack Query · Reference · all subjects

usequery & queryobserver

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

injectQuery with default query function in Angular

When a default query function is configured on QueryClient, injectQuery can be called with only a queryKey without explicitly providing queryFn. The example shows PostsComponent using injectQuery with just queryKey: ['/posts'], and PostComponent using queryKey with enabled option, omitting the queryFn entirely since the default is available.

QueryFunction type signature with queryKey parameter

QueryFunction is an async function type that receives an object parameter containing queryKey. The queryKey is accessible as a property on the function parameter, allowing the function to access the full query key array passed to injectQuery.

initialData option with static value

The initialData option accepts a static value that will be immediately available to the query. This data is shown immediately when a service or component instance is created.

initialData with immediate refetch behavior

When initialData is provided without staleTime, the data shows immediately but the query will also immediately refetch when the service or component instance is created.

initialData with staleTime prevents immediate refetch

When initialData is provided with staleTime set to a value like 1000 milliseconds, the initial data shows immediately but won't refetch until another interaction event is encountered after the staleTime duration expires.

initialDataUpdatedAt option with initialData

The initialDataUpdatedAt option can be used alongside initialData and staleTime to specify when the initial data was last updated. It accepts a timestamp value like 1608412420052. This allows the staleTime calculation to be based on when the data was actually retrieved rather than when the query was created.

initialData as a function for lazy evaluation

The initialData option can accept a function that returns the initial data. This function is called lazily to compute expensive initial data only when needed.

Using getQueryData to seed one query from another

The initialData function can use queryClient.getQueryData() to retrieve data from another query and use it as initial data for the current query. For example, initialData can return a todo from the cached 'todos' query to seed a single 'todo' query.

Using getQueryState for conditional initial data

The initialData function can call queryClient.getQueryState() to get the query state object, which includes the dataUpdatedAt timestamp. This allows checking if cached data is fresh enough (within a certain age threshold) before using it as initial data. If the data is too old, the function can return undefined to trigger a fresh fetch.

initialDataUpdatedAt as a function with getQueryState

The initialDataUpdatedAt option can accept a function that returns a timestamp. It can use queryClient.getQueryState() to retrieve the dataUpdatedAt value from another query, ensuring the initial data's age is properly tracked relative to when that source data was actually updated.

placeholderData option with static value

The placeholderData option in injectQuery can accept a static value that is used as initial data while the query is loading. Example: placeholderData: placeholderTodos will display placeholderTodos immediately.

placeholderData option with function

The placeholderData option in injectQuery can accept a function that receives previousData and previousQuery as parameters and returns the placeholder data. This allows deriving placeholder data from previous query state.

placeholderData can reference cached data

The placeholderData function can call queryClient.getQueryData() to retrieve data from another query in the cache and use it as placeholder data. This enables using related cached data as a placeholder for a new query.

Give your agent this brain