select option isn't utilized by queryClient api

[revyh]

I use the approach described in this cool article. So I can do things like

const options = queryOptions({
  queryKey: ['hello'],
  queryFn: () => Promise.resolve(1234),
  select: (userId) => `Hello, user ${userId}`,
});

// `.data` is a string in TypeScript and runtime
const baseQuery = useQuery(options);
const suspenseQuery = useSuspenseQuery(options);
const queries = useQueries({ queries: [options] });

However, the select function isn't respected by queryClient methods:

const options = queryOptions({
  queryKey: ['hello'],
  queryFn: () => Promise.resolve(1234),
  select: (userId) => `Hello, user ${userId}`,
});

const queryClient = useQueryClient();

// results are numbers in TypeScript and runtime
const fetchQueryResult = await queryClient.fetchQuery(options);
const ensureQueryDataResult = await queryClient.ensureQueryData(options);

This is unexpected behavior, and I'm trying to understand the reason for not supporting select in the lower-level queryClient API.

[TkDodo]

select is an option of the QueryObserver, and it can transform data that is cached for each instance (of useQuery) separately. It doesn't work on imperative methods because they don't create a QueryObserver.

[TkDodo]

select makes no sense in this case because the result of select isn't cached, and the imperative APIs are all about seeding the cache.

[revyh]

I have a couple of use cases for this:

1. Fetching Data in an Event Callback

In my scenario, when a user clicks a button, the callback needs to make several parallel requests, then create a CSV from the data, and save it as a file.

// somewhere in a separate file
const options = (page: number) => queryOptions({
  ...
  select: transformFn,
});

// custom hook
function useDownload() {
  const queryClient = useQueryClient();

  const download = async (totalPages: number) => {
    const pages = Array.from({ length: totalPages }, (_, i) => i + 1);

    const chunks = await Promise.all(
      pages.map((page) => queryClient.fetchQuery(options(page)))
    );

    /*
     * Transform chunks even though transformFn is present in options
     */
    const list = chunks.flat().map(transformFn);

    // Making CSV from the list and saving it as a file
  };

  return download;
}

2. Conditional Cache Population

I use TanStack Router and prefetch data in the route's loader function. On some pages, there is a request waterfall, and I want to prefetch conditionally.

// somewhere in a separate file
const userOptions = () => queryOptions({
  ...
  select: userTransformFn,
});

const articleOptions = () => queryOptions({ ... });

// in route definition
export const Route = createFileRoute('/path/somewhere')({
  loader: async ({ context }) => {
    const rawUser = await context.queryClient.ensureQueryData(userOptions());

    /*
     * Transform user even though userTransformFn is present in options
     */
    const user = userTransformFn(rawUser);

    return user
      ? await context.queryClient.ensureQueryData(articleOptions())
      : undefined;
  }
});

[TkDodo]

if you want the value cached, you can always transform it inside the queryFn. If not, you can call data ? select(data) : undefined after awaiting ensureQueryData.

[revyh]

Yeah, there are ways to handle the situation. But I'm talking about DX. For me, it feels like an inconsistent API. If select transforms data in useQuery, then why doesn't it do so in fetchQuery?

[TkDodo]

yeah we are going in circles now. I think I've explained that. The purpose of select is to create fine-grained subscriptions towards a specific sub-set of data for performance reasons. It doesn't really make sense to have that on imperative APIs