[typescript-urql] Hook option variables are always optional

[edkimmel]

Describe the bug

This is a follow up to https://github.com/dotansimha/graphql-code-generator/issues/7163 The resolution of issue 7163 (release 3.5.0) made the options parameter required when variables are required, but the variables field of that object is still optional, even when the query has required variables.

To Reproduce Write any query with a required variable. When using the hook for that query, you are able to omit the variables field.

query MySubscription($userId: String!) {
  ...
}

useMySubscriptionQuery() // Now fails in 3.5.0
useMySubscriptionQuery({}) // Compiles, but is still incorrect
useMySubscriptionQuery({variables: {userId: "123"}}) // The correct requirement

Expected behavior For queries with required variables, I would expect useMySubscriptionQuery({}) to fail to compile, as variables have not been provided.

[nandorojo]

I fixed it with this patch:

diff --git a/cjs/visitor.js b/cjs/visitor.js
index fa1d1963ce88b894057ae90faaa28e4c3bc7dae3..8686d99c92c7e31ff1a2408c0abe2a930b279baf 100644
--- a/cjs/visitor.js
+++ b/cjs/visitor.js
@@ -73,7 +73,7 @@ export function use${operationName}() {
   return Urql.use${operationType}<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName});
 };`;
         }
-        const isVariablesRequired = node.variableDefinitions.some(variableDef => variableDef.type.kind === graphql_1.Kind.NON_NULL_TYPE && variableDef.defaultValue == null);
+        const isVariablesRequired = node.variableDefinitions.length || node.variableDefinitions.some(variableDef => variableDef.type.kind === Kind.NON_NULL_TYPE && variableDef.defaultValue == null);
         if (operationType === 'Subscription') {
             return `
 export function use${operationName}<TData = ${operationResultType}>(options${isVariablesRequired ? '' : '?'}: Omit<Urql.Use${operationType}Args<${operationVariablesTypes}>, 'query'>, handler?: Urql.SubscriptionHandler<${operationResultType}, TData>) {
diff --git a/esm/visitor.js b/esm/visitor.js
index 9394d4e9715e3f1a7abb0779782fabe0da93ac8c..0dd85b216a2fffc1906b80726b1f65d1e8617178 100644
--- a/esm/visitor.js
+++ b/esm/visitor.js
@@ -69,7 +69,7 @@ export function use${operationName}() {
   return Urql.use${operationType}<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName});
 };`;
         }
-        const isVariablesRequired = node.variableDefinitions.some(variableDef => variableDef.type.kind === Kind.NON_NULL_TYPE && variableDef.defaultValue == null);
+        const isVariablesRequired = node.variableDefinitions.length || node.variableDefinitions.some(variableDef => variableDef.type.kind === Kind.NON_NULL_TYPE && variableDef.defaultValue == null);
         if (operationType === 'Subscription') {
             return `
 export function use${operationName}<TData = ${operationResultType}>(options${isVariablesRequired ? '' : '?'}: Omit<Urql.Use${operationType}Args<${operationVariablesTypes}>, 'query'>, handler?: Urql.SubscriptionHandler<${operationResultType}, TData>) {

[nandorojo]

The issue in my case was that URQL was still requiring variables even when I only had optional ones.