Skip to content

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

Open
@stefanprobst

Description

@stefanprobst

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

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