fix(typescript-urql): optional options for subscription

When generating subscription, it now checks if variables are required and generates correct options argument to the function.
dotansimha · Jul 7, 2023 · 766170d · 766170d
1 parent 6a13cbc
commit 766170d
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 10 deletions.
diff --git a/.changeset/long-buses-pump.md b/.changeset/long-buses-pump.md
@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/typescript-urql': patch
+---
+
+Generates optional or required options argument for subscriptions if variables are required or not.
diff --git a/packages/plugins/typescript/urql/src/visitor.ts b/packages/plugins/typescript/urql/src/visitor.ts
@@ -121,18 +121,20 @@ export function use${operationName}() {
 };`;
     }
 
+    const isVariablesRequired = 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: Omit<Urql.Use${operationType}Args<${operationVariablesTypes}>, 'query'> = {}, handler?: Urql.SubscriptionHandler<${operationResultType}, TData>) {
+export function use${operationName}<TData = ${operationResultType}>(options${
+        isVariablesRequired ? '' : '?'
+      }: Omit<Urql.Use${operationType}Args<${operationVariablesTypes}>, 'query'>, handler?: Urql.SubscriptionHandler<${operationResultType}, TData>) {
   return Urql.use${operationType}<${operationResultType}, TData, ${operationVariablesTypes}>({ query: ${documentVariableName}, ...options }, handler);
 };`;
     }
 
-    const isVariablesRequired = node.variableDefinitions.some(
-      variableDef =>
-        variableDef.type.kind === Kind.NON_NULL_TYPE && variableDef.defaultValue == null,
-    );
-
     return `
 export function use${operationName}(options${
       isVariablesRequired ? '' : '?'

diff --git a/packages/plugins/typescript/urql/tests/__snapshots__/urql.spec.ts.snap b/packages/plugins/typescript/urql/tests/__snapshots__/urql.spec.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`urql Hooks Should generate subscription hooks 1`] = `
+exports[`urql Hooks Should generate subscription hooks with optional arguments 1`] = `
 "import gql from 'graphql-tag';
 import * as Urql from 'urql';
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
@@ -13,7 +13,25 @@ export const ListenToCommentsDocument = gql\`
 }
     \`;
 
-export function useListenToCommentsSubscription<TData = ListenToCommentsSubscription>(options: Omit<Urql.UseSubscriptionArgs<ListenToCommentsSubscriptionVariables>, 'query'> = {}, handler?: Urql.SubscriptionHandler<ListenToCommentsSubscription, TData>) {
+export function useListenToCommentsSubscription<TData = ListenToCommentsSubscription>(options?: Omit<Urql.UseSubscriptionArgs<ListenToCommentsSubscriptionVariables>, 'query'>, handler?: Urql.SubscriptionHandler<ListenToCommentsSubscription, TData>) {
+  return Urql.useSubscription<ListenToCommentsSubscription, TData, ListenToCommentsSubscriptionVariables>({ query: ListenToCommentsDocument, ...options }, handler);
+};"
+`;
+
+exports[`urql Hooks Should generate subscription hooks with required arguments 1`] = `
+"import gql from 'graphql-tag';
+import * as Urql from 'urql';
+export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+export const ListenToCommentsDocument = gql\`
+    subscription ListenToComments($name: String!) {
+  commentAdded(repoFullName: $name) {
+    id
+  }
+}
+    \`;
+
+export function useListenToCommentsSubscription<TData = ListenToCommentsSubscription>(options: Omit<Urql.UseSubscriptionArgs<ListenToCommentsSubscriptionVariables>, 'query'>, handler?: Urql.SubscriptionHandler<ListenToCommentsSubscription, TData>) {
   return Urql.useSubscription<ListenToCommentsSubscription, TData, ListenToCommentsSubscriptionVariables>({ query: ListenToCommentsDocument, ...options }, handler);
 };"
 `;

diff --git a/packages/plugins/typescript/urql/tests/urql.spec.ts b/packages/plugins/typescript/urql/tests/urql.spec.ts
@@ -630,7 +630,38 @@ export function useDefaultValueArgQuery(options?: Omit<Urql.UseQueryArgs<Default
       await validateTypeScript(content, schema, docs, {});
     });
 
-    it('Should generate subscription hooks', async () => {
+    it('Should generate subscription hooks with required arguments', async () => {
+      const documents = parse(/* GraphQL */ `
+        subscription ListenToComments($name: String!) {
+          commentAdded(repoFullName: $name) {
+            id
+          }
+        }
+      `);
+
+      const docs = [{ location: '', document: documents }];
+
+      const content = (await plugin(
+        schema,
+        docs,
+        {
+          withHooks: true,
+          withComponent: false,
+        },
+        {
+          outputFile: 'graphql.tsx',
+        },
+      )) as Types.ComplexPluginOutput;
+
+      expect(content.content).toBeSimilarStringTo(`
+      export function useListenToCommentsSubscription<TData = ListenToCommentsSubscription>(options: Omit<Urql.UseSubscriptionArgs<ListenToCommentsSubscriptionVariables>, 'query'>, handler?: Urql.SubscriptionHandler<ListenToCommentsSubscription, TData>) {
+        return Urql.useSubscription<ListenToCommentsSubscription, TData, ListenToCommentsSubscriptionVariables>({ query: ListenToCommentsDocument, ...options }, handler);
+      };`);
+      await validateTypeScript(content, schema, docs, {});
+      expect(mergeOutputs([content])).toMatchSnapshot();
+    });
+
+    it('Should generate subscription hooks with optional arguments', async () => {
       const documents = parse(/* GraphQL */ `
         subscription ListenToComments($name: String) {
           commentAdded(repoFullName: $name) {
@@ -654,7 +685,7 @@ export function useDefaultValueArgQuery(options?: Omit<Urql.UseQueryArgs<Default
       )) as Types.ComplexPluginOutput;
 
       expect(content.content).toBeSimilarStringTo(`
-      export function useListenToCommentsSubscription<TData = ListenToCommentsSubscription>(options: Omit<Urql.UseSubscriptionArgs<ListenToCommentsSubscriptionVariables>, 'query'> = {}, handler?: Urql.SubscriptionHandler<ListenToCommentsSubscription, TData>) {
+      export function useListenToCommentsSubscription<TData = ListenToCommentsSubscription>(options?: Omit<Urql.UseSubscriptionArgs<ListenToCommentsSubscriptionVariables>, 'query'>, handler?: Urql.SubscriptionHandler<ListenToCommentsSubscription, TData>) {
         return Urql.useSubscription<ListenToCommentsSubscription, TData, ListenToCommentsSubscriptionVariables>({ query: ListenToCommentsDocument, ...options }, handler);
       };`);
       await validateTypeScript(content, schema, docs, {});