orval icon indicating copy to clipboard operation
orval copied to clipboard

Tanstack Query: Use `queryOptions` type helper instead of UseQueryResult

Open Arnagos opened this issue 10 months ago • 1 comments

Tanstack Query recommends using the queryOptions type helper instead of manually typing query results. This is now their recommended standard.

Not using this helper has already led to some problems because QueryOptions and SuspenseQueryOptions are now incompatible. This means that generated getUse*SuspenseQueryOptions() are not usable in useSuspenseQuery / useSuspenseQueries in the current version.

Type 'UseSuspenseQueryOptions<ValueType, ErrorType, ValueType, QueryKey>' is not assignable to type 'UseSuspenseQueryOptions<ValueType, unknown, ValueType, QueryKey>'.
  Types of property 'refetchInterval' are incompatible.
    Type 'number | false | ((query: Query<ValueType, ErrorType, ValueType, QueryKey>) => number | false | undefined) | undefined' is not assignable to type 'number | false | ((query: Query<ValueType, unknown, ValueType, QueryKey>) => number | false | undefined) | undefined'.
      Type '(query: Query<ValueType, ErrorType, ValueType, QueryKey>) => number | false | undefined' is not assignable to type 'number | false | ((query: Query<ValueType, unknown, ValueType, QueryKey>) => number | false | undefined) | undefined'.
        Type '(query: Query<ValueType, ErrorType, ValueType, QueryKey>) => number | false | undefined' is not assignable to type '(query: Query<ValueType, unknown, ValueType, QueryKey>) => number | false | undefined'.
          Types of parameters 'query' and 'query' are incompatible.
            Type 'Query<ValueType, unknown, ValueType, QueryKey>' is not assignable to type 'Query<ValueType, ErrorType, ValueType, QueryKey>'.
              Types of property 'state' are incompatible.
                Type 'QueryState<ValueType, unknown>' is not assignable to type 'QueryState<ValueType, ErrorType>'.
                  Type 'unknown' is not assignable to type 'ErrorType'.typescript(2322)

Minimal, reproducible example

https://codesandbox.io/p/devbox/rough-brook-drv2hx

Steps to reproduce

const [{ error, data }] = useSuspenseQueries({
  queries: [getSuspenseQueryOptions()],
});

function getSuspenseQueryOptions(): UseSuspenseQueryOptions<ValueType,  ErrorType> {
  return {};
}

type ValueType = { some: string; value: string };
type ErrorType = { error: unknown };

Arnagos avatar Jan 06 '25 10:01 Arnagos

This seems like a great improvement! PR is definitely welcome.

melloware avatar Jan 06 '25 12:01 melloware