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

[typescript-urql] useQuery generated hooks are missing argument type

Open CreativeTechGuy opened this issue 3 years ago • 1 comments

Describe the bug

The generated useQuery hooks only specify one of the two generics. The second one, which is currently missing, defines the argument type for the query and is needed when accessing the arguments on the result object from the query.

Your Example Website or App

N/A

Steps to Reproduce the Bug or Issue

No repro needed. The source here is just missing the second argument: https://github.com/dotansimha/graphql-code-generator/blob/master/packages/plugins/typescript/urql/src/visitor.ts#L134

Expected behavior

The generated code would include all possible generics to make the types as strict as possible.

Screenshots or Videos

No response

Platform

  • OS: N/A
  • NodeJS: N/A
  • graphql version: N/A
  • @graphql-codegen/typescript-urql version(s): 3.5.12

Codegen Config File

N/A

Additional context

No response

CreativeTechGuy avatar Jun 27 '22 18:06 CreativeTechGuy

Facing the same thing here. To clarify, the current behavior is like this:

export function useVenueQuery(options: Omit<Urql.UseQueryArgs<VenueQueryVariables>, 'query'> = {}) {
  return Urql.useQuery<VenueQuery>({ query: VenueDocument, ...options });
};

Ideally, it would be this:

export function useVenueQuery(options: Omit<Urql.UseQueryArgs<VenueQueryVariables>, 'query'> = {}) {
  return Urql.useQuery<VenueQuery, VenueQueryVariables>({ query: VenueDocument, ...options });
};

The difference is the second generic VenueQueryVariables added to useQuery.

Currently, if you try to access the operation.variables as a result of the query, it is untyped due to this missing generic:

const [{ operation }] = useVenueQuery()

if (operation.variables.id) {
  // this errors...
}

nandorojo avatar Jul 20 '22 22:07 nandorojo