queries: configuration

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

initialData option for queries

The initialData option in injectQuery allows you to provide initial data that will be displayed immediately when a service or component instance is created. This data is shown to the user while the actual query fetch is in progress.

initialData with no staleTime refetches immediately

When using initialData without setting staleTime, the query will show the initial data immediately but will also immediately refetch the data from the server when the service or component instance is created.

initialData with staleTime delays refetch

When you set staleTime on a query with initialData, the initial data will be shown immediately and the query won't refetch until another interaction event is encountered after the staleTime duration has passed.

initialDataUpdatedAt option

The initialDataUpdatedAt option specifies the timestamp of when the initial data was last updated, as a numeric value in milliseconds (e.g., 1608412420052). This timestamp is used by TanStack Query to calculate whether the data is stale based on the staleTime setting.

initialData as a function with expensive computation

You can pass initialData as a function that returns the computed initial data. This allows you to defer expensive computations until the query is actually created.

Derive initialData from other query cache

You can use queryClient.getQueryData() inside the initialData function to retrieve data from another query in the cache and use it as initial data for the current query. For example, you can use individual items from a 'todos' query as initial data for a specific 'todo' query.

Use initialDataUpdatedAt from another query state

You can pass a function to initialDataUpdatedAt that calls queryClient.getQueryState() to retrieve the dataUpdatedAt timestamp from another query in the cache. This ensures the initial data's timestamp matches when the source data was actually updated.

Conditionally use initialData based on freshness

You can check the freshness of data from another query using queryClient.getQueryState() and comparing Date.now() - state.dataUpdatedAt to a threshold. If the data is fresh enough (e.g., no older than 10 seconds), use it as initial data; otherwise return undefined to trigger a full fetch from a hard loading state.

initialData function example: get todos by ID

const result = injectQuery(() => ({ queryKey: ['todo', this.todoId()], queryFn: () => fetch('/todos'), initialData: () => { return this.queryClient .getQueryData(['todos']) ?.find((d) => d.id === this.todoId()) }, })) This example shows how to use initialData as a function to find a specific todo item from the cached 'todos' query data.

initialData with initialDataUpdatedAt function example

const result = injectQuery(() => ({ queryKey: ['todos', this.todoId()], queryFn: () => fetch(`/todos/${this.todoId()}`), initialData: () => queryClient.getQueryData(['todos'])?.find((d) => d.id === this.todoId()), initialDataUpdatedAt: () => queryClient.getQueryState(['todos'])?.dataUpdatedAt, })) This example shows both initialData and initialDataUpdatedAt as functions that derive values from another query's cache state.

Conditional initialData with freshness check example

const result = injectQuery(() => ({ queryKey: ['todo', this.todoId()], queryFn: () => fetch(`/todos/${this.todoId()}`), initialData: () => { const state = queryClient.getQueryState(['todos']) if (state && Date.now() - state.dataUpdatedAt <= 10 * 1000) { return state.data.find((d) => d.id === this.todoId()) } }, })) This example demonstrates checking if data from another query is fresh (no older than 10 seconds) before using it as initial data. If the data is too old, it returns undefined to trigger a full fetch.

placeholderData with static value

The placeholderData option accepts a static value that will be displayed as the query result while the query is loading. This allows showing data to the user immediately before the actual query completes.

placeholderData with function returning previous data

The placeholderData option can be a function that receives previousData and previousQuery as parameters. This function can return the previousData to keep the last known value displayed while a new query runs.

placeholderData from QueryClient cache

The placeholderData function can access other cached queries via QueryClient's getQueryData method. This allows using data from one query (such as a preview or list item) as placeholder data for a related query (such as a detailed view).

Using placeholderData with injectQuery in Angular

In Angular, use the injectQuery function to configure a query with placeholderData. Pass an object with queryKey, queryFn, and placeholderData properties to injectQuery.

Give your agent this brain