Urql 4 now have more strict generics for passing variables

[mlesin]

Which packages are impacted by your issue?

@graphql-codegen/typescript-vue-urql

Describe the bug

Recent Urql major version update now have more strict type requirements for passing variable into useQuery generic.
Now it forces variables property to be required in passing object if any variable is not optional, and that breaks code generated by typescript-vue-urql:

export function useUsersQuery(
  options: Omit<Urql.UseQueryArgs<never, UsersQueryVariables>, "query"> = {} // ERROR: Property 'variables' is missing in type '{}' but required in type 'Omit<UseQueryArgs<never, Exact<{ id: string; }>>, "query">'.
) {
  return Urql.useQuery<UsersQuery>({ query: UsersDocument, ...options }); // ERROR: Property 'variables' is optional in type ...skipped... but required in type 'MaybeRefObj$1<{ query: DocumentInput<UsersQuery, AnyVariables>; variables: AnyVariables; }>'
}

Your Example Website or App

https://the-guild.dev/graphql/codegen

Steps to Reproduce the Bug or Issue

1. Go to https://the-guild.dev/graphql/codegen
2. Provide the following schema:

schema {
  query: Query
}

type Query {
  user(id: String!): User
}

type User {
  id: String!
  username: String!
  email: String!
}

3. Provide the following operations:

query users($id: String!) {
  user(id: $id) {
    id
    username
  }
}

4. Provide the following config:

generates:
  components.ts:
    plugins:
      - typescript-vue-urql

Expected behavior

That is pretty easy to fix, however:

export function useUsersQuery(  
  options: Omit<Urql.UseQueryArgs<never, UsersQueryVariables>, "query">
//---------------------------------------------------------------------^^ Removing default object here
) {
  return Urql.useQuery<UsersQuery, UsersQueryVariables>({ query: UsersDocument, ...options });
//---------------------------------^^^^^^^^^^^^^^^^^^^ Passing variables type explicitly
}

Screenshots or Videos

No response

Platform

• OS: Linux
• NodeJS: [e.g. 18.14.0]
• graphql version: [e.g. 16.3.0]
• @graphql-codegen/typescript-vue-urq version: 2.3.6
• @urql/core version 4.0.4

Codegen Config File

No response

Additional context

No response

[TimoStolz]

For further reference, this issue has been also reported as issue #9421 in repo dotansimha/graphql-code-generator

[TimoStolz]

The relevant change in urql is reported here: urql-graphql/urql#2607

[productdevbook]

I have the same problem and I hope this problem will be solved as soon as possible.

[lucastraba]

This was fixed, but it stopped working again!

[saihaj]

Released @graphql-codegen/typescript-vue-urql@3.2.0