queryOptions typing errors when calling queryClient methods with ref in query key

[EwenDC]

Describe the bug

Follow on from #6299. It appears the typing issues persist if your queryKey includes any Ref or MaybeRef values, both nested in objects and at the top level.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/tanstack-query-example-vue-basic-forked-3gchjt?file=%2Fsrc%2FPosts.vue%3A12%2C37

Steps to reproduce

1. Look at src/posts.vue
2. An erroneous type error should appear on line 15 but not on line 17

Expected behavior

There should be no typing errors, as we have ensured the query options object is valid by passing it through the queryOptions function.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: MacOS 14.3.1 (23D60)
• Browser: Chrome Version 122.0.6261.112 (Official Build) (arm64)

Tanstack Query adapter

vue-query

TanStack Query version

v5.27.5

TypeScript version

v5.1.6

Additional context

No response

[TkDodo]

sandbox is private, I cannot access it

[TkDodo]

if you have a typing issue, please just provide a typescript playground, that's so much easier:

https://www.typescriptlang.org/play

[EwenDC]

Apologies, I did not realise the sandbox was set to private by default, I have made it public. I did not provide a TypeScript playground link because I was struggling to replicate the issue there. However now that I understand it better I can also provide a link to that too: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzlApgMzgXzmqERwDkAbgK4qEBQoksicAjuVAJ4DyYMwEAdgM4AaOKT4oAisxYBhADbAUPGEJHjJWHHgKEAAjACG-fQGMA1gHoyKALRMUrKpSO8+8W61nzFcALzDREu2k5BRgACgBKR2d4SBcASQATH2R0UIBGSKdDOD0EkGAeAFkIBJRk1DRQmChySKjs2JgA1mS3dk5uflCESjg+xkkAaRQWAC44AG1CAAUIF0IhRsSAXUpMTOi-O2aWVskOLmdu3v624bHJwgBVUSgF+lz8opKyzFX1ykoVHdDGncjvpJQiooP9Pm0PCEAHRoFAwIwACx+f0kkQhwUUMLhiJ+ILBQA

[TkDodo]

@DamianOsipiuk FYI

[ilajosmanov]

agree, face the same problem :(

[EwenDC]

Thank you for the fix @DamianOsipiuk! This allows us to adopt the much better queryOptions() pattern