Urql 4 now have more strict generics for passing variables

mlesin commented 1 year ago

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

Go to https://the-guild.dev/graphql/codegen
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:
```graphql
query users($id: String!) {
  user(id: $id) {
    id
    username
  }
}

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
}