Skip to content

[vue-query] useInfiniteQuery doesn't support infiniteQueryOptions with MaybeRef type #9562

@romansp

Description

@romansp

Describe the bug

In Vue useInfiniteQuery supports MaybeRef argument for its options. And types were updated in #8956. But if it's used in combination with infiniteQueryOptions type error is displayed.

Your minimal, reproducible example

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgVwM4FMCSA7AZsbYGdARWXSgE8AaOA-Q4siygeTBmAm1TgF84uKBBBwA5AAEYAQx4yAxgGsA9ADdyAWgCO5KmICwAKFCRYiOPJFhkxACb9Bw0QCJ16ZwG4jR9AA9T8LjI2PKc3HCoADbo6GAAFCCoAFxw2MggAEYUAJSIRnBwUOgwyFDYqegA7nAACk7AGHFFqBCRquhwALwAfBHFACqg6BA2Tegtbei0idnZXoZ83oaWcnAQHFw8XXmGBTosANLolCkA2mL0BESkupRiALrU+XD7VABi2ClxuT0R0bFxAAM2QAdDAABbobBxb5dXpiADKIg6tmkMjE2SeuzgAHNigA5PwwGrSPEkqDSEBfH69YK2dAMdC2LEFK6caSRElk6QUqlwQFYvjzFaoeDrMI8ADCVhsTO2lnAstsMJpaw23FQcyMIrF6p4AHUKWAwHLOnQ8Gybix2BLUHFxZtNcKNbrbYbpMamdLFXZ5TK7Cq4eaGNdmFQbY77XrNVrDNqXS9bgBGbZoLAWxhWqhR22xnWJlgAZlTGBwIaYtxzju91jseYTr0oACYS+ny1nKFWNe7PbZ66tGwAWVtly1hzsO7tGk22GtK2NAA

Steps to reproduce

  1. Open minimal repro.
  2. See type error for useInfiniteQuery variant with infiniteQueryOptions and computed.
No overload matches this call.
  Overload 1 of 3, '(options: DefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, MaybeRefDeep<string>[] & string[] & { [dataTagSymbol]: InfiniteData<string, unknown>; [dataTagErrorSymbol]: Error; }, number>, queryClient?: QueryClient | undefined): UseInfiniteQueryReturnType<...>', gave the following error.
    Argument of type 'ComputedRef<UndefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, string[], number> & { queryKey: string[] & { ...; }; }>' is not assignable to parameter of type 'DefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, MaybeRefDeep<string>[] & string[] & { [dataTagSymbol]: InfiniteData<string, unknown>; [dataTagErrorSymbol]: Error; }, number>'.
      Type 'ComputedRef<UndefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, string[], number> & { queryKey: string[] & { ...; }; }>' is not assignable to type 'ComputedRef<{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>; ... 32 more ...; initialPageParam: MaybeRefDeep...'.
        Type 'ComputedRef<UndefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, string[], number> & { queryKey: string[] & { ...; }; }>' is not assignable to type 'ComputedRef<{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>; ... 32 more ...; initialPageParam: MaybeRefDeep...'.
          Type 'UndefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, string[], number> & { queryKey: string[] & { ...; }; }' is not assignable to type '{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>; ... 32 more ...; initialPageParam: MaybeRefDeep<...>; } & S...'.
            Type '{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, string[]> | undefined>; staleTime?: MaybeRefDeep<StaleTimeFunction<string, Error, InfiniteData<...>, string[]> | undefined>; ... 31 more ...; initialPageParam: MaybeRefDeep<...>; } & ShallowOption & { ...; } & { ...; }' is not assignable to type '{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>; ... 32 more ...; initialPageParam: MaybeRefDeep<...>; } & S...'.
              Type '{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, string[]> | undefined>; staleTime?: MaybeRefDeep<StaleTimeFunction<string, Error, InfiniteData<...>, string[]> | undefined>; ... 31 more ...; initialPageParam: MaybeRefDeep<...>; } & ShallowOption & { ...; } & { ...; }' is not assignable to type '{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>; ... 32 more ...; initialPageParam: MaybeRefDeep<...>; }'.
                Types of property 'enabled' are incompatible.
                  Type 'MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, string[]> | undefined>' is not assignable to type 'MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>'.
                    Type '(query: Query<string, Error, InfiniteData<string, unknown>, string[]>) => boolean' is not assignable to type 'MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>'.
                      Type '(query: Query<string, Error, InfiniteData<string, unknown>, string[]>) => boolean' is not assignable to type '(query: Query<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }>) => boolean'.
                        Types of parameters 'query' and 'query' are incompatible.
                          Type 'Query<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }>' is not assignable to type 'Query<string, Error, InfiniteData<string, unknown>, string[]>'.
                            The types of 'options.queryFn' are incompatible between these types.
                              Type 'unique symbol | QueryFunction<string, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { (): string; (): string; }; toLocaleString: { ...; } & { ...; }; ... 39 more ...; [dataTagErrorSymbol]: Error; }, never> | undefined' is not assignable to type 'unique symbol | QueryFunction<string, string[], never> | undefined'.
                                Type 'QueryFunction<string, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { (): string; (): string; }; toLocaleString: { (): string; (locales: string | string[], options?: (NumberFormatOptions & DateTimeFormatOptions) | undefined): string; (locales: string | string[]...' is not assignable to type 'unique symbol | QueryFunction<string, string[], never> | undefined'.
                                  Type 'QueryFunction<string, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { (): string; (): string; }; toLocaleString: { (): string; (locales: string | string[], options?: (NumberFormatOptions & DateTimeFormatOptions) | undefined): string; (locales: string | string[]...' is not assignable to type 'QueryFunction<string, string[], never>'.
                                    Type 'string[]' is missing the following properties from type '{ [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { (): string; (): string; }; toLocaleString: { (): string; (locales: string | string[], options?: (NumberFormatOptions & DateTimeFormatOptions) | undefined): string; (locales: string | string[], options?: (NumberFor...': [dataTagSymbol], [dataTagErrorSymbol]
  Overload 2 of 3, '(options: UndefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, MaybeRefDeep<string>[] & string[] & { [dataTagSymbol]: InfiniteData<string, unknown>; [dataTagErrorSymbol]: Error; }, number>, queryClient?: QueryClient | undefined): UseInfiniteQueryReturnType<...>', gave the following error.
    Argument of type 'ComputedRef<UndefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, string[], number> & { queryKey: string[] & { ...; }; }>' is not assignable to parameter of type 'UndefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, MaybeRefDeep<string>[] & string[] & { [dataTagSymbol]: InfiniteData<string, unknown>; [dataTagErrorSymbol]: Error; }, number>'.
      Type 'ComputedRef<UndefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, string[], number> & { queryKey: string[] & { ...; }; }>' is not assignable to type 'ComputedRef<{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>; ... 32 more ...; initialPageParam: MaybeRefDeep...'.
        Type 'ComputedRef<UndefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, string[], number> & { queryKey: string[] & { ...; }; }>' is not assignable to type 'ComputedRef<{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>; ... 32 more ...; initialPageParam: MaybeRefDeep...'.
          Type 'UndefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, string[], number> & { queryKey: string[] & { ...; }; }' is not assignable to type '{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>; ... 32 more ...; initialPageParam: MaybeRefDeep<...>; } & S...'.
            Type '{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, string[]> | undefined>; staleTime?: MaybeRefDeep<StaleTimeFunction<string, Error, InfiniteData<...>, string[]> | undefined>; ... 31 more ...; initialPageParam: MaybeRefDeep<...>; } & ShallowOption & { ...; } & { ...; }' is not assignable to type '{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>; ... 32 more ...; initialPageParam: MaybeRefDeep<...>; } & S...'.
              Type '{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, string[]> | undefined>; staleTime?: MaybeRefDeep<StaleTimeFunction<string, Error, InfiniteData<...>, string[]> | undefined>; ... 31 more ...; initialPageParam: MaybeRefDeep<...>; } & ShallowOption & { ...; } & { ...; }' is not assignable to type '{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>; ... 32 more ...; initialPageParam: MaybeRefDeep<...>; }'.
                Types of property 'enabled' are incompatible.
                  Type 'MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, string[]> | undefined>' is not assignable to type 'MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>'.
                    Type '(query: Query<string, Error, InfiniteData<string, unknown>, string[]>) => boolean' is not assignable to type 'MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }> | undefined>'.
                      Type '(query: Query<string, Error, InfiniteData<string, unknown>, string[]>) => boolean' is not assignable to type '(query: Query<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }>) => boolean'.
                        Types of parameters 'query' and 'query' are incompatible.
                          Type 'Query<string, Error, InfiniteData<string, unknown>, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { ...; }; ... 40 more ...; [dataTagErrorSymbol]: Error; }>' is not assignable to type 'Query<string, Error, InfiniteData<string, unknown>, string[]>'.
                            The types of 'options.queryFn' are incompatible between these types.
                              Type 'unique symbol | QueryFunction<string, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { (): string; (): string; }; toLocaleString: { ...; } & { ...; }; ... 39 more ...; [dataTagErrorSymbol]: Error; }, never> | undefined' is not assignable to type 'unique symbol | QueryFunction<string, string[], never> | undefined'.
                                Type 'QueryFunction<string, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { (): string; (): string; }; toLocaleString: { (): string; (locales: string | string[], options?: (NumberFormatOptions & DateTimeFormatOptions) | undefined): string; (locales: string | string[]...' is not assignable to type 'unique symbol | QueryFunction<string, string[], never> | undefined'.
                                  Type 'QueryFunction<string, { [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { (): string; (): string; }; toLocaleString: { (): string; (locales: string | string[], options?: (NumberFormatOptions & DateTimeFormatOptions) | undefined): string; (locales: string | string[]...' is not assignable to type 'QueryFunction<string, string[], never>'.
                                    Type 'string[]' is missing the following properties from type '{ [x: number]: MaybeRefDeep<string> & string; length: number; toString: { (): string; (): string; } & { (): string; (): string; }; toLocaleString: { (): string; (locales: string | string[], options?: (NumberFormatOptions & DateTimeFormatOptions) | undefined): string; (locales: string | string[], options?: (NumberFor...': [dataTagSymbol], [dataTagErrorSymbol]
  Overload 3 of 3, '(options: UseInfiniteQueryOptions<string, Error, InfiniteData<string, unknown>, MaybeRefDeep<string>[], number>, queryClient?: QueryClient | undefined): UseInfiniteQueryReturnType<...>', gave the following error.
    Argument of type 'ComputedRef<UndefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, string[], number> & { queryKey: string[] & { ...; }; }>' is not assignable to parameter of type 'UseInfiniteQueryOptions<string, Error, InfiniteData<string, unknown>, MaybeRefDeep<string>[], number>'.
      Type 'ComputedRef<UndefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, string[], number> & { queryKey: string[] & { ...; }; }>' is not assignable to type 'ComputedRef<{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, string[]> | undefined>; staleTime?: MaybeRefDeep<StaleTimeFunction<string, Error, InfiniteData<...>, string[]> | undefined>; ... 31 more ...; initialPageParam: MaybeRefDeep<...>; } & ShallowOption>'.
        Type 'UndefinedInitialDataInfiniteOptions<string, Error, InfiniteData<string, unknown>, string[], number> & { queryKey: string[] & { ...; }; }' is not assignable to type '{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, string[]> | undefined>; staleTime?: MaybeRefDeep<StaleTimeFunction<string, Error, InfiniteData<...>, string[]> | undefined>; ... 31 more ...; initialPageParam: MaybeRefDeep<...>; } & ShallowOption'.
          Type 'Ref<{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, string[]> | undefined>; staleTime?: MaybeRefDeep<StaleTimeFunction<...> | undefined>; ... 31 more ...; initialPageParam: MaybeRefDeep<...>; } & ShallowOption, { ...; } & ShallowOption> & { ...; } & { ...; }' is not assignable to type '{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, string[]> | undefined>; staleTime?: MaybeRefDeep<StaleTimeFunction<string, Error, InfiniteData<...>, string[]> | undefined>; ... 31 more ...; initialPageParam: MaybeRefDeep<...>; } & ShallowOption'.
            Type 'Ref<{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, string[]> | undefined>; staleTime?: MaybeRefDeep<StaleTimeFunction<...> | undefined>; ... 31 more ...; initialPageParam: MaybeRefDeep<...>; } & ShallowOption, { ...; } & ShallowOption> & { ...; } & { ...; }' is missing the following properties from type '{ enabled?: MaybeRefOrGetter<Enabled<string, Error, InfiniteData<string, unknown>, string[]> | undefined>; staleTime?: MaybeRefDeep<StaleTimeFunction<string, Error, InfiniteData<...>, string[]> | undefined>; ... 31 more ...; initialPageParam: MaybeRefDeep<...>; }': getNextPageParam, initialPageParam(2769)

Expected behavior

No type error for useQueryOptions with infiniteQueryOptions and computed.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

N/A

Tanstack Query adapter

None

TanStack Query version

v5.83.1

TypeScript version

v5.9.2

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions