query icon indicating copy to clipboard operation
query copied to clipboard

[vue-query] Type error: queryOptions return type only contains the queryKey and initialData properties

Open basuneko opened this issue 6 months ago • 3 comments

Describe the bug

There seems to be a discrepancy between the return type of queryOptions in vue query and react query adapters.

const options = queryOptions({
  queryKey: ['groups'],
  queryFn: () => []
})

useQuery(options)

options.queryFn

The actual options object seems to be okay: useQuery, fetchQuery, etc functions accept it and work just fine. But trying to access queryFn, placeholderData, etc throws a TS error

Property 'queryFn' does not exist on type 'UndefinedInitialQueryOptions<Group[], Error, Group[], string[]> & { queryKey: DataTag<string[], Group[]>; }'.

In fact, only queryKey and initialData properties are suggested in autocomplete. With react-query, all of the query options (queryFn, placeholderData, etc) are suggested.

Your minimal, reproducible example

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgRwK4FMoE8DyYbAQB2AznAL5wBmUEIcA5AAIwCGpbAxgNYD0U6VpxgBaNJiwMAsAChQkWIhQZseAsTKsyANwwBFFbnyFSAGjioS6AxLha4u9AFUrN7OcvXDAYQA2wdCJ4Sho6RhZ2Ei4+RzFDaTlwaHhWAA9CMlD6BjSMhNkYLDB0OABxWlQwOABeJWAAEwAuOCJUEAAjTApZWU4NeCp0GE4AC3KISrJagAoASmaABVoQYCsAHnHKgG0AXQA+GoPciBIAOgBzIemGXnOKsBIGWdOYEcDpgRJIUhLqg8-vlZTvVWGxZj0ZBC+hw4AIhDA1CYpsoJIiNNMELI4NiUdgANLoLDNLYMO4TB4MHamLE48TYABiRGag2GY3uJFk5HBkJkcOEaNIsl4vDgAD0APwQvkI4waU50rCMoUinGq1US2TSgVnMC+IToEYQXz1TAAEVBrGVautYslPOhUQcGG1NSdXlRstIGJp2IVBKJcBJZMmlOpMlVCsZzKGo02D053IhskcLnd2Gmjm1iZkDvgnH8gXgtU8biwfgCQTmvQLQVOLNGpYzzs9JGzmZbVo1Mnb6lI8sMSpkwptaq7PaRp11+sNxrNFqtI5xXd6-Td2oA6sBXgBJIhb4CsXzmtiuxyl7Xe8O0wz+4mk9mhn24xVM6gxtnkkhh1XAPcEQ-HqwxI7AmELjhom47n+B5Hha-YSIOw6Ltiy4yEAA

Steps to reproduce

  1. Define query options using the queryOptions helper (with or without the initial data)
  2. Try to access queryOptions.queryFn

Expected behavior

I expected queryFn to be available but I'm getting a TS error: Property 'queryFn' does not exist on type UndefinedInitialQueryOptions<...>

How often does this bug happen?

Every time

Screenshots or Videos

Screenshot 2024-08-13 at 14 59 51

Platform

Chrome 127.0.6533.100 Mac OS 10.15.7

Tanstack Query adapter

vue-query

TanStack Query version

v5.51.21

TypeScript version

v5.5.4

Additional context

No response

basuneko avatar Aug 13 '24 03:08 basuneko