query: [vue-query]: Fresh Vue3 project + Tanstack - Typescript errors, This is likely not a portable.

Describe the bug

With a fresh Vue3 installation with @tanstack/vue-query installed - VSCode produces typescript errors, as seen in the screenshot.

It’s not clear to me if this is an issue with tanstack-query, vue3 - or typescript. There seems to be various issues around that suggest it might be any of them.

Its worth noting that the project still runs and produces expected results.

tanstack/vue-query does not have this issue on V4. It only occurs after moving to V5.

Your minimal, reproducible example

https://github.com/cadriel/tanstack-query-issue

Steps to reproduce

  1. Clone the example project. https://github.com/cadriel/tanstack-query-issue
  2. Open the project in VSCode - ensure you’ve installed and configured the Vue dev tools (Volar, etc…)
  3. See the error as per the screenshot above.

Expected behavior

I’d expect to not see any errors in VSCode, and for the types to be correctly inferred.

How often does this bug happen?

Every time

Screenshots or Videos

Screenshot 2023-11-06 at 10 38 54 AM

Platform

macOS, VSCode.

Tanstack Query adapter

vue-query

TanStack Query version

V5+

TypeScript version

V5.2.2 (as per npm create vue@latest)

Additional context

No response

About this issue

  • Original URL
  • State: open
  • Created 8 months ago
  • Reactions: 13
  • Comments: 31 (15 by maintainers)

Commits related to this issue

Most upvoted comments

I would consider this a showstopper, this seems like an extremely big issue in actually using vue-query

I’ve done a quick analysis locally and i strongly believe that it’s caused by tsup mangling~ (and renaming) exports in the declaration files. Instead of exporting UseQueryReturnType directly from useQuery-d58edace.d.ts and exporting it under the same name in index.d.ts, it exports it like this UseQueryReturnType as b and reexports it from index.d.ts like this: export { b as UseQueryReturnType } from './useQuery-d58edace.js';.

I think this might introduce an indirection that confuses TypeScript and it fails to recognize that this type is actually exported from @tanstack/vue-query. I patched declaration files locally to export UseQueryReturnType “directly” and the problem disappeared.

My recommendation would be to:

  • report this to tsup. I don’t think this exports aliasing serves any real purpose in declaration files so I don’t think it’s worth doing
  • report this to TypeScript. I think that this is quite a basic aliasing case and that this could work better in TypeScript. A fix similar-ish to my https://github.com/microsoft/TypeScript/pull/56100 could fix this.

Yes, you can add the type manually for the example. However, as soon as you add any complexity (mutations, etc…) - then it becomes very cumbersome to figure out what types to import.

I couldn’t figure out what types to import at all for some circumstances.

The moduleResolution suggestion may cause other issues.

Ideally there should be no other requirements. Thanks for looking into this further.

Anyway, switching to the beta of TS isn’t a good solution in case you have other dependencies that require lower version (like eslint-typescript).

Using the beta should resolve the issue that I was able to diagnose and fix here. If the issue persist please share a repro case.

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. I can’t investigate what I can’t debug.

sorry for the noise, switching the project to 5.4.0-beta and VSCode with CMD + P Select TypeScript Version… to the project version “solved” the issue, too bad it’s not working with previous 5.3.0 though.

I just tested it out and it works. I’m almost sure that you have forgotten to use the workspace TS version (you can choose “Select TypeScript Version…” from the command palette. This is such a big annoyance when using VS Code - you have to do it in each project separately 🙈

The declaration: true comment above may provide a hint. There were a lot of upstream dependencies that required updates in order to support Typescript changes. There was a bit of turmoil for a month or two. It might also be related to Vite and browser module resolution that bought about those updates.

In any case, vue-query@v5 is in an unusable state for us because of this.

@DamianOsipiuk You may want to consider increasing priority if this affects multiple packages.