TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
42.72k stars 2.93k forks source link

[vue-query] type error with generic query params #8199

Open stefanprobst opened 1 month ago

stefanprobst commented 1 month ago

Describe the bug

i run into a type error with vue-query in the following example:

import { useQuery } from '@tanstack/vue-query'

const basket = { fruit: "apple", vegetable: "broccoli" } as const

function getBasket<T extends "fruit" | "vegetable">(type: T) {
  return basket[type]
}

function useBasket<T extends "fruit" | "vegetable">(type: T) {
  return useQuery({
    queryKey: ["basket", type] as const, // TYPE ERROR
    queryFn({ queryKey: [, type]}) {
      return getBasket(type)
    }
  })
}

const test = getBasket("fruit")
const test2 = useBasket("fruit") // UseQueryReturnType<unknown, Error>

see: https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUBNYRm8AEb1U7dPAC8iUlGTAYALjgAiemDAAbdAYA0cbugDmK+nPP6Dc8q2mngBonEVw0rISEiTIjKwwwDJwDjAAQorKMAA8ACpw6AAeMOiMACaohmTaML4APoa2cU7mBgB8ABQweGDo+mkAlIgScHBQKshQjHAKSioA2i1tALoShCHiYRFRMWjoieOpGdm5BUUGJToVVfaOzhZN0+1wXT3ifQMwQyPr2Lh4jQi9fXBCHwBpdB4fQTNxJFRWODXGb+IpBFiWH59TicX7ojGYuAAPQA-Mi-sI8AAxRhfQmA4Gg6wwwjdb4PDFPF6xFSbZLNVroToEhaMunzRYI+C5FhwdRxdkqRqHLTHHniVHovFSGRi0UwABM4pQGClMBlRzKCqVvxV4iAA

note that the exact same example, when using react-query instead of vue-query, works fine, and does correctly infer UseQueryResult<"apple", Error> - see: https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPRTr2swBaAI458VALAAoKawjN4AI3qp26eAF5EpKMmAwAXHABE9MGAA26IwBo4AN3QBzNfQWXDRheVazzwI0RwynCy8lJSJMiM-MBycM4wAELKqjAAPAAqcOgAHjDojAAmqMZkujABAD7GDgmulkYAfAAUMHhg6IYZAJSIUnBwPDDIUIxwSipqANptHQC6UoThkpHRMLFjaOjJk+lZuflFJUZlelU1Ti5uVi2znXA9fZIDQyObGNi4eM0I-QNwIi+AGl0HhDFNPCk1DY4Hc5kESqEWNY-gNOJx-pisdi4AA9AD8qIBojwADFGD9icDQeDbHDCL1fs8sa9RvE1DtUq12uhukSlsyGYtlkj4PkWHBNAlOWpmicdGc+ZJ0ZiCTI5BLxTAAEySlAYGUwOWnCpKlX-NWSIA

Your minimal, reproducible example

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPQBuOAtAEcc+KgFgAUBNYRm8AEb1U7dPAC8iUlGTAYALjgAiemDAAbdAYA0cbugDmK+nPP6Dc8q2mngBonEVw0rISEiTIjKwwwDJwDjAAQorKMAA8ACpw6AAeMOiMACaohmTaML4APoa2cU7mBgB8ABQweGDo+mkAlIgScHBQKshQjHAKSioA2i1tALoShCHiYRFRMWjoieOpGdm5BUUGJToVVfaOzhZN0+1wXT3ifQMwQyPr2Lh4jQi9fXBCHwBpdB4fQTNxJFRWODXGb+IpBFiWH59TicX7ojGYuAAPQA-Mi-sI8AAxRhfQmA4Gg6wwwjdb4PDFPF6xFSbZLNVroToEhaMunzRYI+C5FhwdRxdkqRqHLTHHniVHovFSGRi0UwABM4pQGClMBlRzKCqVvxV4iAA

Steps to reproduce

  1. open typescript playground
  2. see type error on line 12, and also that the type on line 21 in inferred as UseQueryReturnType<unknown, Error>

Expected behavior

vue-query example should work like react-query example

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Tanstack Query adapter

vue-query

TanStack Query version

5.59.13

TypeScript version

5.6.3

Additional context

No response