Urql variables should support Vue refs (MaybeRef)

[chojnicki]

Which packages are impacted by your issue?

@graphql-codegen/typescript-vue-urql

Describe the bug

Based on Urql vue documentation

All inputs that are passed to useQuery may also be reactive state. This means that both the inputs and outputs of useQuery are reactive and may change over time.

This functionality was added long time ago with this PR https://github.com/urql-graphql/urql/pull/2608

So we can set variable directly from ref.

const page = ref(1)

{
  variables: {
    page,
  }
}

But it does not work with generated types, because TS expects type number and not Ref<Number>

Type 'Ref' is not assignable to type 'number'.ts(2322)

Generated type looks like this:

type DemoQueryVariables = Exact<{
  page?: InputMaybe<Scalars['Int']['input']>;
}>;

I guess it supposed to be

import type { MaybeRef } from 'vue'

type DemoQueryVariables = Exact<{
  page?: InputMaybe<MaybeRef<Scalars['Int']['input']>>;
}>;

Your Example Website or App

https://stackblitz.com/edit/github-ecwtg1?file=index.ts

Steps to Reproduce the Bug or Issue

1. Open index.ts in reproduction.
2. Look at wrong TS error.

Expected behavior

There should be no TS errors while using refs or computed inside variables.

Screenshots or Videos

No response

Platform

• OS: Linux
• NodeJS: 22
• graphql version: 16.8.1
• @graphql-codegen/typescript-vue-urql version(s): 3.1.0

Codegen Config File

No response

Additional context

No response

[arkandias]

This is correctly handled by urql/vue typing. Currently the way to go to use refs inside variables while preserving type is to unwrap them with reactive (or ref which uses reactive under the hood):

const id = ref('abc');
useUserQuery({
  variables: reactive({
    id, // this works
  }),
});