Query input mistyped

[sunwize]

Overview

When I try to call useQuery from the frontend, the input doesn't match the procedure's input.

Explanation

Procedure declaration

Client call

The only way to make it work is by doing:

Dependencies

• @falcondev-oss/trpc-vue-query: 0.5.0
• @trpc/client: 11.1.0
• @trpc/server: 11.0.0

node v22.14.0
npm 10.9.2

[sunwize]

I've tested with different versions of the @falcondev-oss/trpc-vue-query package, this issue happens at 0.5.0-rc.14.

[hunterwilhelm]

I'm experiencing this issue too

[DrJume]

Hi, thanks for bringing this to our attention! I'm sorry, that the new docs are not available yet, so smaller changes to the library are not yet documented.
Because it is still in v0, some breaking changes in minor updates may occur.

With 0.5.0 the parameter to useQuery was changed to only accept a getter or a ref, so that the input stays reactive and has working TS auto-complete.
The value-only type broke auto-complete, and I couldn't fix it easily.

I hope it's not a huge problem, because passing the value as a getter differs only by a few characters and, as an added bonus, when it depends on a reactive value, it stays in sync.

.useQuery({ foo: 'bar' })
→
.useQuery(() => ({ foo: 'bar' }))

[sunwize]

I understand the reactivity matter, but ultimately I think it should be up to the developer to ensure reactivity (or not) when necessary.

On my local, I've edited the types, replacing Ref<TTInput> with MaybeRef<TTInput> and it seems to work 🤔

// file: src/types.ts

input: inferProcedureInput<TProcedure> extends void
          ? inferProcedureInput<TProcedure>
          : MaybeRef<TTInput> | (() => TTInput)

Not sure if this is the right way of doing it 😅