Problems with typification of useQueries

[andreynovikov]

I have created a helper hook based on useQueries. The idea is to encapsulate specific fetching logic in queryFn and reformat results for easier use. It works as intended, but I can not fix typescript errors. The full code is:

// hook can be called with extra query options
type SkipQueryOptions<TData, TError, TResult> = OmitKeyof<
  UseQueryOptions<TData, TError, TResult>,
  "queryFn" | "queryKey"
>;
type SkipQueryOptionsForUseQueries<TData, TError, TResult> = OmitKeyof<SkipQueryOptions<TData, TError, TResult>, "placeholderData" | "subscribed"> & {
  placeholderData?: TData | QueriesPlaceholderDataFunction<TData>;
};

// `queryFn` injects variant for later use in `combine` function
type MultipleApiData<TData> = {
  variant: string,
  data: TData
}
// result is a dictionary of variants with corresponding data, plus some flags
type ResultMapping<TResult> = {
  [key: string]: TResult;
}
type MultipleApiDataResult<TResult> = {
  data: ResultMapping<TResult>,
  pending: boolean,
}

// TData is what is returned by API in fetch result
// TResult is what can be returned by `select` function if it transporms data
export const useMultipleApiData = <TData, TResult = TData>(
  service: ServiceVariant,
  model: string,
  variants: string[],
  pathMappingFn: (variant: string) => string,
  queryOptions?: SkipQueryOptionsForUseQueries<MultipleApiData<TData>, FetchError, MultipleApiDataResult<TResult>>,
  sileceErrors: boolean = false,
  refetchOnWindowFocus: boolean = true
): MultipleApiDataResult<TResult> => {
  // `combine` should be memoized according to docs
  const combine = useCallback((results: UseQueryResult<TData, unknown>[]) => {
    return {
      data: results.filter((result) => result.data !== undefined).reduce((variantResults, result) => {
        // @ts-expect-error Broken typing (too complex to fix)
        variantResults[result.data!.variant] = result.data!.data;
        return variantResults;
      }, {} as ResultMapping<TResult>),
      pending: results.some((result) => result.isPending),
    }
  }, []);
  const sessionContext = useSession();
  const token = sessionContext.data?.user.tokens.access.token;
  return useQueries<MultipleApiData<TData>[], MultipleApiDataResult<TResult>>({
    queries: variants.map((variant) => ({
      refetchOnWindowFocus: refetchOnWindowFocus,
      ...queryOptions,
      queryKey: [service, model, variant, token],
      queryFn: async ({ queryKey }: { queryKey: string[]}) => {
        const accessToken = queryKey.at(-1) ?? (await getSession())?.user.tokens.access.token;
        const authHeaders: HeadersInit = accessToken !== undefined
          ? { Authorization: `Bearer ${accessToken}` } : {};

        const response = await fetch(
          getApiBaseUrl(service) + `/${model}/` + pathMappingFn(variant),
          {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
              ...authHeaders,
            },
          }
        );

        if (!response.ok)
          throw new FetchError(response);

        const data = await response.json() as TData;
        return { variant, data } as MultipleApiData<TData>;
      },
    })) as unknown as QueriesOptions<MultipleApiData<TData>[]>,
    combine,
  });
};

The main problem is with @ts-expect-error - I didn't manage to fix it. The other problem is with as unknown as..., without it it doesn't work too.

P.S. I have a similar helper hook for single useQuery, and I've managed to typificate it without problems.