Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
stefanprobst opened this issue Oct 20, 2024 · 0 comments
Open

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

stefanprobst opened this issue Oct 20, 2024 · 0 comments

Comments

@stefanprobst
Copy link
Contributor

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

  • OS: linux
  • browser: firefox 130

Tanstack Query adapter

vue-query

TanStack Query version

5.59.13

TypeScript version

5.6.3

Additional context

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants