Having trouble properly typing a useQueries wrapper

[elanmed]

sandbox: https://codesandbox.io/p/sandbox/inspiring-leftpad-cm84cd?file=%2Fsrc%2Fmain.tsx%3A14%2C75

Given an API that looks something like:

interface User {
  name: string;
  age: number;
  userId: number;
}

interface Car {
  year: number;
  model: string;
  carId: number;
}

export const api = {
  getUser: (userId: number): Promise<User> => {
    return new Promise((resolve) => {
      resolve({
        name: "Bob",
        age: 25,
        userId,
      });
    });
  },
  getCar: (carId: number): Promise<Car> => {
    return new Promise((resolve) => {
      resolve({
        model: "Toyota Camry",
        year: 2020,
        carId,
      });
    });
  },
};

type Api = typeof api;
export type ApiMethodName = keyof Api;
export type ApiResponse<MethodName extends ApiMethodName> = Awaited<
  ReturnType<Api[MethodName]>
>;
export type ApiParams<MethodName extends ApiMethodName> = Parameters<
  Api[MethodName]
>;

I wanted to create a wrapper for useQueries, useApiQueries:

function useApiQueries<MethodName extends ApiMethodName>(
  apiQueries: Array<
    { methodName: MethodName; params: ApiParams<MethodName> } & UseQueryOptions<
      ApiResponse<MethodName>
    >
  >
) {
  const queries = apiQueries.map(({ methodName, params, ...options }) => {
    return {
      queryKey: [methodName, ...params],
      queryFn: function () {
        return api[methodName].apply(this, params);
      },
      ...options,
    };
  });

  return useQueries({ queries });
}

Currently, however, the type for the results array is a tuple of a union of all the possible return types i.e. [UseQueryResult<User | Car, unknown>, UseQueryResult<User | Car, unknown>]
instead of [UseQueryResult<Car, unknown>, UseQueryResult<User, unknown>].

After looking at the types for useQueries, I saw that the hook accepts a generic T extends any[] which is also passed into QueriesResults<T> to type the return value. After looking more closely at QueriesResults, I determined that T is an array of { queryFnData: infer TQueryFnData; error?: infer TError }. With this in mind, I tried to create a mapped type that I could directly pass into useQueries as T:

type GenerateQueryFnData<MethodNames extends ApiMethodName[]> = {
  [Index in keyof MethodNames]: {
    queryFnData: ApiResponse<MethodNames[Index]>;
  };
};

type Queries<MethodNames extends ApiMethodName[]> = {
  [Index in keyof MethodNames]: {
    methodName: MethodNames[Index];
    params: ApiParams<MethodNames[Index]>;
  } & QueriesOptions<[{ queryFnData: ApiResponse<MethodNames[Index]> }]>[0];
};

function useApiQueriesVariant<MethodNames extends ApiMethodName[]>(
  apiQueries: Queries<MethodNames>
) {
  const queries = apiQueries.map(({ methodName, params, ...options }) => {
    return {
      queryKey: [methodName, ...params],
      queryFn: function () {
        return api[methodName].apply(this, params);
      },
      ...options,
    };
  });

  //   Target requires 1 element(s) but source may have fewer.
  return useQueries<GenerateQueryFnData<MethodNames>>({ queries });
}

but I'm getting the type error above. This is about where I got stuck, and I'm hoping others will have more insight. Thanks!

[elanmed]

@TkDodo @artysidorenko looks like you updated the types most recently in #2634 , I'd appreciate any suggestions you might have!

[elanmed]

For those interested, I managed to find a solution:

type ApiQueries<MethodNames extends readonly ApiMethodName[]> = {
 [Index in keyof MethodNames]: {
    methodName: MethodNames[Index];
    params: Readonly<ApiParams<MethodNames[Index]>>;
  } & UseQueryOptions<ApiResponse<MethodNames[Index]>>;
};

type GenerateReturn<MethodNames extends readonly ApiMethodName[]> = {
  [Index in keyof MethodNames]: UseQueryResult<ApiResponse<MethodNames[Index]>>;
};

function useApiQueries<MethodNames extends readonly ApiMethodName[]>(
  apiQueries: ApiQueries<MethodNames>
): GenerateReturn<MethodNames> {
  const queries = apiQueries.map(({ methodName, params, ...options }) => {
    return {
      queryKey: [methodName, ...params],
      queryFn: function () {
        return api[methodName].apply(null, params);
      },
      ...options,
    };
  });
  return useQueries({
    queries: queries,
  }) as GenerateReturn<MethodNames>;
}

function Test() {
  const [carVar, userVar, userVar2] = useApiQueriesVariant([
    { methodName: "getCar", params: [123] },
    { methodName: "getUser", params: [456] },
    { methodName: "getUser", params: [789] },
  ] as const);
  return null;
}

They key was to use readonly and as const so typescript could infer the MethodNames as a tuple, instead of a union array.