Using a selection / projection of a query

[jamesarosen]

I have a useQuery hook that returns some data:

type ProductName = string;
type Price = number;
type PriceList = Record<ProductName, Price>;

const usePrices: () => UseQueryResult<PriceList> = () => {
  return useQuery({
    queryKey: ['prices'],
    queryFn: () => fetch('/api/prices'),
  })
}

I want to build another hook that transforms the result of the first query.

One way to do this would be to return the transformation directly:

const usePrice: (name: ProductName) => Price = () => {
  const prices = usePrices()
  return prices.data?.[name] ?? 0
}

The downside here is that I lose all the metadata like whether the query is loading.

I could instead use a dependent query:

const usePrice: (name: ProductName) => UseQueryResult<Price> = () => {
  const prices = usePrices()

  return useQuery({
    queryKey: ['prices', name],
    queryFn: () => prices.data?.[name] ?? 0,
    enabled: !!prices.data
  })
}

The problem with this one is that @tanstack/query/exhaustive-deps complains about the lack of prices.data?.[name] in the queryKey. I could disable the rule or add the dependency to the key, but both feel slightly wrong. Also: if the base query is refetching or errored, shouldn't the dependent query as well?

My last idea was to destructure the result and merge in my custom data:

const usePrice: (name: ProductName) => UseQueryResult<Price> = () => {
  const prices = usePrices()

  return {
    ...prices,
    data: prices.data?.[name] ?? 0,
  }
}

But the types are wrong. Among other things, refetch returns a PriceList but should return a Price.

Possibly related: #4727

[TkDodo]

this can be done with select:

const usePrices: (select) => {
  return useQuery({
    queryKey: ['prices'],
    queryFn: () => fetch('/api/prices'),
    select,
  })
}

const usePrice: (name) => {
  return usePrices(data => data[name] ?? 0 )
}

[jamesarosen]

This is perfect!

For others: the v3 upgrade docs and the v5 infinite query docs have some more examples.