diff --git a/.changeset/long-buses-pump.md b/.changeset/long-buses-pump.md new file mode 100644 index 000000000..beebccaa0 --- /dev/null +++ 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 index 4e806682e..0b3329b57 100644 --- 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}(options: Omit, 'query'> = {}, handler?: Urql.SubscriptionHandler<${operationResultType}, TData>) { +export function use${operationName}(options${ + isVariablesRequired ? '' : '?' + }: Omit, '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 index 2752f3a03..be646d64b 100644 --- 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 = Pick>; @@ -13,7 +13,25 @@ export const ListenToCommentsDocument = gql\` } \`; -export function useListenToCommentsSubscription(options: Omit, 'query'> = {}, handler?: Urql.SubscriptionHandler) { +export function useListenToCommentsSubscription(options?: Omit, 'query'>, handler?: Urql.SubscriptionHandler) { + return Urql.useSubscription({ 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 = Pick>; + +export const ListenToCommentsDocument = gql\` + subscription ListenToComments($name: String!) { + commentAdded(repoFullName: $name) { + id + } +} + \`; + +export function useListenToCommentsSubscription(options: Omit, 'query'>, handler?: Urql.SubscriptionHandler) { return Urql.useSubscription({ query: ListenToCommentsDocument, ...options }, handler); };" `; diff --git a/packages/plugins/typescript/urql/tests/urql.spec.ts b/packages/plugins/typescript/urql/tests/urql.spec.ts index c1da0cca4..ba00957d6 100644 --- 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 { + 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(options: Omit, 'query'>, handler?: Urql.SubscriptionHandler) { + return Urql.useSubscription({ 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(options: Omit, 'query'> = {}, handler?: Urql.SubscriptionHandler) { + export function useListenToCommentsSubscription(options?: Omit, 'query'>, handler?: Urql.SubscriptionHandler) { return Urql.useSubscription({ query: ListenToCommentsDocument, ...options }, handler); };`); await validateTypeScript(content, schema, docs, {});