tanstack-query-intent-core-understand-query-internals-a-8ab976f4

Mental Model

QueryClient owns the caches. QueryCache stores Query instances. Hooks and adapter APIs create QueryObserver instances that subscribe components to one query. Observer-level options like select, staleTime, polling, and tracked result access shape what each component sees.

An inactive query can exist in the cache without active observers. It can be read imperatively, hydrated, invalidated, or garbage collected, but it is not the same as a component actively observing query state.

Core Patterns

Use observers for UI reads

function TodoPage({ id }: { id: string }) {
  const todo = useQuery({
    queryKey: ['todo', id],
    queryFn: () => fetchTodo(id),
  })