Unable to type useQueries options or results without casting

[matthewdavidrodgers]

Describe the bug
While the arguments and return value of useQuery can clearly be typed and even inferred via generics, useQueries offers no way to provide types that extend the default type - meaning what would normally be generic in useQuery is unknown in useQueries, and thus cannot be typed correctly (without an unsafe cast).

To illustrate more clearly:
This is the signature of useQuery
https://github.com/tannerlinsley/react-query/blob/ead2e5dd5237f3d004b66316b5f36af718286d2d/src/react/useQuery.ts#L9-L15
Notice how the generic TQueryFnData is used in both the type of the options and the result. Thus, if your options contain a queryFn that returns a Promise<string>, TypeScript knows via inference that the return value will (when settled successfully) have a data property that is a string.

Contrast this to the signature of useQueries
https://github.com/tannerlinsley/react-query/blob/ead2e5dd5237f3d004b66316b5f36af718286d2d/src/react/useQueries.ts#L8
There is no api to provide info about the types that these individual queries will be dealing with. UseQueryOptions has generics, as we can see from useQuery, but without any way to provide them, they all default to unknown. This also goes for UseQueryResult; its generics also default to unknown, meaning the data property of each settled successful result is typed as unknown.

To Reproduce
Steps to reproduce the behavior:
As this is a compile-time issue, I've provided a minimal example of the issue:

import { useQueries, UseQueryOptions, UseQueryResult } from 'react-query';

function stringQueryor(): Promise<string> {
  return Promise.resolve("hello there!");
}

// While this compiles correctly, the return type of this function is
// UseQueryResult<unknown, unknown, unknown>[]
// Even though the queryFns are explicitly typed to strings,
// the data property of each result (when settled successfully)
// is unknown
function inferenceOnlyUseQueries() {
  return useQueries([
    { queryKey: "stringOne", queryFn: stringQueryor },
    { queryKey: "stringTwo", queryFn: stringQueryor }
  ]);
}

// This does NOT compile.
// TypeScript reports the error below:
//
// Type 'QueryObserverResult<unknown, unknown>[]' is not assignable to type 'QueryObserverResult<string, unknown>[]'.
//  Type 'QueryObserverResult<unknown, unknown>' is not assignable to type 'QueryObserverResult<string, unknown>'.
//    Type 'QueryObserverIdleResult<unknown, unknown>' is not assignable to type 'QueryObserverResult<string, unknown>'.
//      Type 'QueryObserverIdleResult<unknown, unknown>' is not assignable to type 'QueryObserverIdleResult<string, unknown>'.
//        Type 'unknown' is not assignable to type 'string'.
//
// Ultimately, it seems that the inference is not able to
// support the covariance of UseQueryResult<string>[] to UseQueryResult[]
function explicitReturnValue(): UseQueryResult<string> {
  return useQueries([
    { queryKey: "stringOne", queryFn: stringQueryor },
    { queryKey: "stringTwo", queryFn: stringQueryor }
  ]);
}

// This also does NOT compile. Not in the declaration of optionOne and optionTwo,
// but in their usage as an argument to useQueries. TypeScript reports this error:
//
// Type 'UseQueryOptions<string, unknown, string>' is not assignable to type 'UseQueryOptions<unknown, unknown, unknown>'.
//  Types of property 'onSuccess' are incompatible.
//    Type '((data: string) => void) | undefined' is not assignable to type '((data: unknown) => void) | undefined'.
//      Type '(data: string) => void' is not assignable to type '(data: unknown) => void'.
//        Types of parameters 'data' and 'data' are incompatible.
//          Type 'unknown' is not assignable to type 'string'.
//
// Here, it seems useQuery expects a UseQueryOptions array with generics
// of unknown. Anything more specifi (in our case, string) does not compile.
function explicitOptionValue() {
  let optionOne: UseQueryOptions<string> = {
    queryKey: "stringOne", queryFn: stringQueryor
  };
  let optionTwo: UseQueryOptions<string> = {
    queryKey: "stringTwo", queryFn: stringQueryor
  };
  return useQueries([optionOne, optionTwo]);
}

// This also does NOT compile. The error here is noted at the return value.
// TypeScript reports this error:
//
// Type 'QueryObserverResult<unknown, unknown>[]' is not assignable to type 'QueryObserverResult<string, unknown>[]'.
//
// Same fundamental issue as before. No matter how explicit you are
// (or permissive, as we see from the first example), it is impossible to
// type the return value of useQueries so that it locks in with your option
// argument (as specified by the queryFn)
function explicitOptionAndReturnValue(): UseQueryResult<string> {
  let optionOne: UseQueryOptions<string> = {
    queryKey: "stringOne", queryFn: stringQueryor
  };
  let optionTwo: UseQueryOptions<string> = {
    queryKey: "stringTwo", queryFn: stringQueryor
  };
  return useQueries([optionOne, optionTwo]);
}

The only way I was able to get a successful compile with the correct types was with an unsafe cast:

import { useQueries, UseQueryResult } from 'react-query';

function stringQueryor(): Promise<string> {
  return Promise.resolve("hello there!");
}

// This compiles, but the cast following the return value is UNSAFE
// I could cast to any type I want, since I'm casting from unknown
// I must manually provide that type, and keep that context in my
// head if and when a refactor changes the type.
function inferenceOnlyUseQueries() {
  return useQueries([
    { queryKey: "stringOne", queryFn: stringQueryor },
    { queryKey: "stringTwo", queryFn: stringQueryor }
  ]) as UseQueryResult<string>[];
}

Expected behavior
Best case scenario: the type of the return value of useQueries is inferred via the queryFn, without needing to explicitly type the options argument

import { useQueries } from 'react-query';

function stringQueryor(): Promise<string> {
  return Promise.resolve("hello there!");
}

// the return type of this function is UseQueryResult<string, unknown, string>[]
function inferenceOnlyUseQueries() {
  return useQueries([
    { queryKey: "stringOne", queryFn: stringQueryor },
    { queryKey: "stringTwo", queryFn: stringQueryor }
  ]);
}

Workable scenario: the type of the return value of useQueries is inferred via the the explicit type of the options argument, without needing an explicit unsafe cast

import { useQueries, UseQueryOptions } from 'react-query';

function stringQueryor(): Promise<string> {
  return Promise.resolve("hello there!");
}

// the return type of this function is UseQueryResult<string, unknown, string>[]
function inferenceOnlyUseQueries() {
  let options: UseQueryOptions<string> = [
    { queryKey: "stringOne", queryFn: stringQueryor },
    { queryKey: "stringTwo", queryFn: stringQueryor }
  ];
  return useQueries(options);
}

I suspect providing generics to useQueries may be a part of the solution, but as those are not currently part of the api, i did not provide an example as "expected" here.

Screenshots
N/A

Desktop (please complete the following information):

• OS: OSX
• Browser: N/A
• Version: react-query@3.5.16 typescript@4.0.3

Smartphone (please complete the following information):
N/A

Additional context
N/A

[TkDodo]

We have an open PR with some discussions that tries to improve the types of useQueries, see: #1527

[johnnyreilly]

Hey @matthewdavidrodgers!

As @TkDodo has already indicated, there's a PR open which looks to improve the typing story of useQueries. In the meantime, if you'd like to have stronger typing, it is possible. This can be achieved by wrapping useQueries into a useQueriesTyped function and calling that instead.

I write about the mechanism here: https://blog.johnnyreilly.com/2021/01/03/strongly-typing-react-query-s-usequeries - however the TL;DR is the code below. I hope this helps! 🌻

import { useQueries, UseQueryOptions, UseQueryResult } from 'react-query';

type Awaited<T> = T extends PromiseLike<infer U> ? Awaited<U> : T;

export function useQueriesTyped<TQueries extends readonly UseQueryOptions[]>(
    queries: [...TQueries]
): {
  [ArrayElement in keyof TQueries]: UseQueryResult<
    TQueries[ArrayElement] extends { select: infer TSelect }
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      ? TSelect extends (data: any) => any
        ? ReturnType<TSelect>
        : never
      : Awaited<
          ReturnType<
            NonNullable<
              Extract<TQueries[ArrayElement], UseQueryOptions>['queryFn']
            >
          >
        >
  >
} {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    return useQueries(queries as UseQueryOptions<unknown, unknown, unknown>[]) as any;
}

[babycourageous]

Thanks @johnnyreilly for the wrapper workaround. I was having some of the same problems as @matthewdavidrodgers with the unknowns and TS errors that useQueries was throwing and was also looking to avoid the type assertions with as. It will probably take me a few reads of your post to even understand the voodoo going in this killer workaround hahah.

[matthewdavidrodgers]

sorry for the late reply here - thanks for the helpful responses! I understand the funkiness of this, and the need to get it right, so I appreciate the work going into it. We're OK with casting or using the wrapper workaround for now, but excited to see a solution get merged!

[cloud-walker]

Hey @matthewdavidrodgers!

As @TkDodo has already indicated, there's a PR open which looks to improve the typing story of useQueries. In the meantime, if you'd like to have stronger typing, it is possible. This can be achieved by wrapping useQueries into a useQueriesTyped function and calling that instead.

I write about the mechanism here: https://blog.johnnyreilly.com/2021/01/strongly-typing-react-query-s-usequeries.html - however the TL;DR is the code below. I hope this helps! 🌻

import { useQueries, UseQueryOptions, UseQueryResult } from 'react-query';

type Awaited<T> = T extends PromiseLike<infer U> ? Awaited<U> : T;

export function useQueriesTyped<TQueries extends readonly UseQueryOptions[]>(
    queries: [...TQueries]
): {
  [ArrayElement in keyof TQueries]: UseQueryResult<
    TQueries[ArrayElement] extends { select: infer TSelect }
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      ? TSelect extends (data: any) => any
        ? ReturnType<TSelect>
        : never
      : Awaited<
          ReturnType<
            NonNullable<
              Extract<TQueries[ArrayElement], UseQueryOptions>['queryFn']
            >
          >
        >
  >
} {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    return useQueries(queries as UseQueryOptions<unknown, unknown, unknown>[]) as any;
}

I'm pretty new to typescript so I can easily wrong, but I've found another (simpler?) workaround:

import {
  useQueries as useQueriesBase,
  UseQueryOptions,
  QueryObserverResult,
} from 'react-query'

export const useQueries = <
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData
>(
  queries: UseQueryOptions<TQueryFnData, TError, TData>[],
) =>
  useQueriesBase(
    queries as UseQueryOptions<unknown, unknown, unknown>[],
  ) as QueryObserverResult<TQueryFnData, TError>[]

Cheers!

[johnnyreilly]

Hey @cloud-walker

Your workaround actually is the road I originally travelled! The thing that it doesn't afford is getting the explicit type from a given element of the array of queries / results.

That's not the greatest explanation I realise, but if you read the conversation on the PR you'll see how it evolved from something very similar to your approach to one that has more powerful type inference

[ntsim]

@johnnyreilly great effort on your workaround (it's doing some pretty crazy stuff)! I gave it a try but it seems that whilst we get type inference on the return types, it prevents auto-completion for parameter argument types.

I'm using IntelliJ, but it seems to happen in VSCode too. It's a bit of an unfortunate hit to the developer experience 😢

Not sure what can really be done there as auto-completion suggestions do tend to go out of the window when generic inference gets too complicated.

For me, it wasn't worth the trade-off as I'm still getting used to the react-query API and it really helps to have completions. I've gone back to casting for the time being. I suspect we might be waiting a while until sufficient improvements in TypeScript give a good solution to this though...

[johnnyreilly]

it prevents auto-completion for parameter argument types

Not quite sure what you mean.. Is it the same thing as this? #1527 (comment)

[ntsim]

it prevents auto-completion for parameter argument types

Not quite sure what you mean.. Is it the same thing as this? #1527 (comment)

Not sure! I mostly mean this:

If I try and auto-complete (Ctrl+Space) the query options, I get nothing from the IDE. Compare this with vanilla useQueries:

[johnnyreilly]

Oh interesting!

[radist2s]

As a simple solution, you can use module declaration merging:

/**
 * react-query-typings.d.ts
 **/

import { QueryKey, UseQueryOptions, UseQueryResult } from 'react-query';

declare module 'react-query' {
  export declare function useQueries<
    TQueryFnData = unknown,
    TError = unknown,
    TData = TQueryFnData,
    TQueryKey extends QueryKey = QueryKey
  >(
    queries: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[]
  ): UseQueryResult<TData, TError>[];
}