graphql-code-generator-community icon indicating copy to clipboard operation
graphql-code-generator-community copied to clipboard

Urql 4 now have more strict generics for passing variables

Open mlesin opened this issue 1 year ago • 4 comments

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!
}
  1. Provide the following operations:
query users($id: String!) {
  user(id: $id) {
    id
    username
  }
}
  1. 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

mlesin avatar Apr 12 '23 11:04 mlesin