query icon indicating copy to clipboard operation
query copied to clipboard

[vue-query] `useQuery` no longer accepts computed `queryOptions`

Open romansp opened this issue 1 year ago • 0 comments

Describe the bug

useQuery no longer allows computed(() => queryOptions(...)) to be used as options argument due to type error.

The following code throws type error. This is possibly related to #7101 which was fixed in #7390 and released in v5.35.2.

const todos: string[] = [];
const todosQuery = (id: string) => queryOptions({
  queryKey: ["todos", id] as const,
  queryFn: () => Promise.resolve(todos),
})

export function useTodo(todoId: MaybeRefOrGetter<string>) {
  const options = computed(() => todosQuery(toValue(todoId)));
  // type error below: No overload matches this call.
  const query = useQuery(options);
  return query;
}
Type 'readonly ["todos", string]' is not assignable to type '{ readonly [x: number]: string; readonly 0: "todos"; readonly 1: string; readonly length: 2; toString: { (): string; (): string; }; toLocaleString: { (): string; (): string; }; concat: { (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<...>)[]): string[]; (...items: ConcatArray<...>[]): ...'.(2769)

Seems to be purely a typing issue. No problems in runtime, as queryOptions is a noop. Removing queryOptions fixes the error.

Your minimal, reproducible example

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgYwuArjApgEwDRwwCeYWcAsgIZEBGWASlgGYDyUA4ljNlATBADVKAG3RkAvnCZQ0cAOQA3MXIBQoSLERwAjmKhEWYGMAgA7AM4F05rAEU9ROJOmy5AARiULn5AGsA9EpYALS6WPqqKqjehBA4EOYAXHDmMFDApgDmANoAunAAvHB5ANxRZqmx8eb24Y5FABTAOMmp6VkAlIUAfDoOhsYVDQgqcH11ANJYRMnZAET81XMEzfmU5igVMHij4-oAYqbJDV0FvQAKMiDANgB0UFjmEMIKWA2LCR074h0qKlgADw08CY6FMyEGpjg1iwABU4hB3giAJItCjUOiMVgcLg8AA8bQymW6XRGY2ilQgRhMFkKmww2BwDROPSqCVq+iRQlEbw+qI6ArKY38-kIJDI4RkUGSADkIHAIK8oMIIJQcHAQJQYMgABaPQg6m4oETCW67CnwML6OkwjlEBpUyHmDpCuAPGDoKBQq1EMriIA

Steps to reproduce

  1. Go to TS playground repro
  2. Inspect type error in useQuery

Expected behavior

Expecting no type errors.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • @tanstack/vue-query v5.37.1

Tanstack Query adapter

vue-query

TanStack Query version

v5.37.1

TypeScript version

v5.4.5

Additional context

No response

romansp avatar May 24 '24 16:05 romansp