tanstack-query-intent-core-build-query-abstractions

Core Patterns

Prefer a queryOptions factory as the base abstraction. Hooks, loaders, prefetches, suspense queries, and QueryClient calls can all consume it.

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

export function invoiceOptions(id: number) {
  return queryOptions({
    queryKey: ['invoice', id],
    queryFn: () => fetchInvoice(id),
    staleTime: 60_000,
  })
}

export function useInvoice(id: number) {
  return useQuery(invoiceOptions(id))
}