tanstack-query-intent-core-selectors-and-derived-state

Core Patterns

Use select to subscribe a component to the data shape it actually needs while keeping the full response in the cache.

Select a stable slice

import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'

const productOptions = (id: string) =>
  queryOptions({
    queryKey: ['product', id],
    queryFn: () => fetchProduct(id),
  })