Skip to content

UseQueryOptions are not assignable to useQuery in V5 #5696

@rajzik

Description

@rajzik

Describe the bug

After update to react query 5 I've found issue with types.

When I try to create object with RQ UseQueryOptions it is not possible to assign this options to useQuery.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/gracious-meninsky-6mj52n?file=%2Fsrc%2FApp.tsx%3A9%2C8

Steps to reproduce

  1. Create options with type UseQueryOptions
  2. Pass options to the useQuery function
  3. Typescript error TS
typescript(2769) No overload matches this call. Overload 1 of 2, '(options: UndefinedInitialDataOptions, queryClient?: QueryClient | undefined): UseQueryResult<...>', gave the following error. Argument of type '{ enabled?: boolean | undefined; staleTime?: number | undefined; refetchInterval?: number | false | ((data: TData | undefined, query: Query) => number | ... 1 more ... | undefined) | undefined; ... 24 more ...; queryKey: st...' is not assignable to parameter of type 'UndefinedInitialDataOptions'. Type '{ enabled?: boolean | undefined; staleTime?: number | undefined; refetchInterval?: number | false | ((data: TData | undefined, query: Query) => number | ... 1 more ... | undefined) | undefined; ... 24 more ...; queryKey: st...' is not assignable to type 'UseQueryOptions'. Types of property 'refetchInterval' are incompatible. Type 'number | false | ((data: TData | undefined, query: Query) => number | ... 1 more ... | undefined) | undefined' is not assignable to type 'number | false | ((data: TData | undefined, query: Query) => number | ... 1 more ... | undefined) | undefined'. Type '(data: TData | undefined, query: Query) => number | ... 1 more ... | undefined' is not assignable to type 'number | false | ((data: TData | undefined, query: Query) => number | ... 1 more ... | undefined) | undefined'. Type '(data: TData | undefined, query: Query) => number | ... 1 more ... | undefined' is not assignable to type '(data: TData | undefined, query: Query) => number | ... 1 more ... | undefined'. Types of parameters 'query' and 'query' are incompatible. Type 'Query' is not assignable to type 'Query'. The types of 'options.queryFn' are incompatible between these types. Type 'QueryFunction | undefined' is not assignable to type 'QueryFunction | undefined'. Type 'QueryFunction' is not assignable to type 'QueryFunction'. The type 'QueryKey' is 'readonly' and cannot be assigned to the mutable type 'string[]'. Overload 2 of 2, '(options: DefinedInitialDataOptions, queryClient?: QueryClient | undefined): DefinedUseQueryResult<...>', gave the following error. Argument of type '{ enabled?: boolean | undefined; staleTime?: number | undefined; refetchInterval?: number | false | ((data: TData | undefined, query: Query) => number | ... 1 more ... | undefined) | undefined; ... 24 more ...; queryKey: st...' is not assignable to parameter of type 'DefinedInitialDataOptions'. Type '{ enabled?: boolean | undefined; staleTime?: number | undefined; refetchInterval?: number | false | ((data: TData | undefined, query: Query) => number | ... 1 more ... | undefined) | undefined; ... 24 more ...; queryKey: st...' is not assignable to type 'UseQueryOptions'. Types of property 'refetchInterval' are incompatible. Type 'number | false | ((data: TData | undefined, query: Query) => number | ... 1 more ... | undefined) | undefined' is not assignable to type 'number | false | ((data: TData | undefined, query: Query) => number | ... 1 more ... | undefined) | undefined'.typescript(2769)

Expected behavior

As a user I expect that UseQueryOptions can be assigned to the useQuery hook.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • OS: Mac OS
  • Browser: Chrome

Tanstack Query adapter

react-query

TanStack Query version

5.0.0-alpha.71

TypeScript version

v5.0.2

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions