transforming queries

[jackmellis]

So this is something I've come across a few times already. Say I've got a function that returns a query:

const useBasket = () => useQuery('basket', fetchBasket);

but I also have a selector, or similar, that wants to extract a property from that query. I want to use the same query under the hood, but just pluck something out of it.

I don't want to rewrite my useQuery line again, especially if it involves some complex fetching logic or something...

const useBasketCount = () => {
  const { data: basket } = useBasket();
  return basket?.count;
};

that's okay but then in my component I'd need to do something like this:

const count = useBasketCount();
const { status } = useBasket();

if (status === 'loading') { ... }

Now I've got to grab both the original query, and the transformation. This is a simple example, but suppose my transformation is more complicated or relies on other bits and pieces. It'd be good if I could have something like

const { data: count,  status } = useBasketCount();

so although the actual react-query call is fetching the basket, I can return a subset of that data but still have the original query properties.

Right now to achieve that I'd have to do something like this:

const useBasketCount = () => {
  const query = useBasket();
  const data = query.data?.count;

  return {
    ...query,
    data,
  };
};

I also fear this could cause other complications, like type mismatches on the useQuery options.

I was thinking you could maybe have some sort of transform option that runs after your query has fetched and cached. Imagine something like this:

const useBasket = (opts) => useQuery('basket', fetchBasket, opts);

const useBasketCount = () => useBasket({ transform: (basket) => basket.count });

const { data: count } = useBasketCount();

Apologies for the probably over-simplified use case!

[wolverineks]

can you confirm there are type issues when doing this?
is there a specific issue you are running into?