Improved types for Vue Tanstack Query

[rkorzhoff]

Description

It would be great if you could improve the types for requests parameters, especially considering Vue 3 refs. It’s a common use case to pass reactive variables as parameters

Reproducible example or configuration

https://stackblitz.com/edit/vitejs-vite-cwmyp5

Just install deps and run npm run ts:check

OpenAPI specification (optional)

No response

System information (optional)

No response

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-cwmyp5 (Open reproduction)

[holtgrewe]

Actually, MaybeRefOrGetter<T> should be used and toValue(value) can be used to resolve this.

[zumm]

I can confirm this feature is really important. Actually it is near impossible for me to use tanstack plugin cuz almost every param is ref/computed.

[mrlubos]

@zumm Hi, aware of this pain! Planning to tackle this after releasing the Nuxt client as it touches on those concepts as well

[zumm]

I wanna share workaround i found recently. useQuery (and others vue-query composables) accepts reactive objects as options. So you can do things like that:

const somethingId = ref(23)
const query = useQuery(computed(() => getSomethingByIdOptions({ path: { id: somethingId.value } })))

Still a bit clunky, but makes it possible to use generated by tanstack plugin code.

[mrlubos]

Thanks @zumm! The Nuxt client is now available so this should get prioritised soon

[holtgrewe]

@mrlubos As always, I'm grateful for the work you put into this wonderful library.

Is there any timeline regarding a fix to this?

[h-sigma]

Hey, this is super important.