Conditional select parameter on useQuery with type inference

[halileohalilei]

I'm using v4 of TanStack Query for React on a project that integrates with a lot of different endpoints. For each endpoint, I create a file and implement a hook that uses useQuery to send a request. So for a GET /orders endpoint it looks something like this:

export function useOrders<T = GetOrdersResponse>(
  params: GetOrdersUrlParams,
  options: {
    isDisabled?: boolean;
    select?: (data: GetOrdersResponse) => T;
  } = {}
) {
  const { isDisabled = false, select } = options;

  return useQuery({
    queryKey: queryKeyFactory.getOrders(params),
    queryFn: () => fetchGetOrdersEndpoint(params),
    enabled: !isDisabled,
    select,
  });
}

This works great and all types are inferred properly when I pass a select with a different return type to useOrders. Now I want to provide some default abstraction to these hooks so that even if the consumer doesn't pass a select callback, the response is transformed into a default shape. So let's say I have the following function as a default select parameter:

function defaultSelect(data: GetOrdersResponse) {
  return data.rows;
}

When I change the select parameter of useQuery to select: select ?? defaultSelect, I get this TS error on every parameter of useQuery:

No overload matches this call.
  The last overload gave the following error.
    Object literal may only specify known properties, and 'queryKey' does not exist in type 'readonly unknown[]'.ts(2769)
useQuery.d.ts(16, 25): The last overload is declared here.

I assume the return type of select can't be inferred correctly so it's inferring the whole options as readonly unknown[].

I know this is a bit of a niche use case, but any help or insight would be greatly appreciated.

[TkDodo]

I would do it like this:

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbwFB1XArgZwKYEV3ZQCeANEgL5wBmUEIcA5AAIwCGAdpmwMYDWA9FGytuMALQBHAsQYBuJEirp2o4BHZwAJtiqt0AGxgBlbPuyiAFJtZsAXHADi2GAHko2qJgBK2TJE7YAJSIKHBCMOhQGtZsAHS0AO6Y8uQKMERg2I7Obh7evv44cAC8iGEQSfZOru6EmACqUPoACqxQrCCYcKnpmdk1eY0tbR1dpQhwYCMg9lxQwOwA5t0K2AAekLDUyqrqGDi5dQA8AColcD4RUScZ2Ee92BBUWjp6hiZmogB8XxahU+1OlUcrVPENWoDMGRUBAwDA1Jx7Mg0HBgJgACJo1gAIzMmgA-PZsRAIGYOPIUThPjBCXArDZWMCBnUfH51DhgsUvnAThTuucEKlgsi4Nx2fAJmjMZgcXjzrp9DgSHAqeZ4JRSrD4ez5KFwpENFg8NIiBYRagpIQiABpbBEewAbQY0DyDGVANGAF1oWhLcQAGLsewWTnc5q0EBo7DxXykgBu2DN5Uqk2mXXIgR9qGw7Fl2E09gAhFKsbj81mVaY1cGYqxQyEUSj9VFK9S4PjW2r6WxgvZtLoDMYq5Za4FQqhUhPAikFGLOPA-URzkbDp4kx6ZowqCSGN0x4vYrWkPx+I24AA9fGz8VwRcAJmXB1BmHX03sDG3EF35GVE1VohrBl61reIKkwWIN1iMwlhgAALPckHvQ8GWPU9G0vIA

[halileohalilei]

Thanks @TkDodo, I don't get any TS errors with this implementation, but query2.data is typed as number | GetOrdersUrlParams | undefined whereas I want it to be just number | undefined.

[halileohalilei]

I was able to achieve what I wanted with function overloads like this.