fix(typescript-vue-urql): variable typing (#801)

dotansimha · Aug 21, 2024 · 6970825 · 6970825
1 parent e17901b
commit 6970825
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 12 deletions.
diff --git a/.changeset/smooth-timers-peel.md b/.changeset/smooth-timers-peel.md
@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/typescript-vue-urql': minor
+---
+
+Fix types for variables used in a query/subscription
diff --git a/packages/plugins/typescript/vue-urql/src/visitor.ts b/packages/plugins/typescript/vue-urql/src/visitor.ts
@@ -92,14 +92,14 @@ export function use${operationName}() {
 
     if (operationType === 'Subscription') {
       return `
-export function use${operationName}<R = ${operationResultType}>(options: Omit<Urql.Use${operationType}Args<never, ${operationVariablesTypes}>, 'query'>, handler?: Urql.SubscriptionHandlerArg<${operationResultType}, R>) {
-  return Urql.use${operationType}<${operationResultType}, R, ${operationVariablesTypes}>({ query: ${documentVariableName}, ...options }, handler);
+export function use${operationName}<R = ${operationResultType}>(options?: Omit<Urql.Use${operationType}Args<never, ${operationVariablesTypes} | undefined>, 'query'>, handler?: Urql.SubscriptionHandlerArg<${operationResultType}, R>) {
+  return Urql.use${operationType}<${operationResultType}, R, ${operationVariablesTypes} | undefined>({ query: ${documentVariableName}, variables: undefined, ...options }, handler);
 };`;
     }
 
     return `
-export function use${operationName}(options: Omit<Urql.Use${operationType}Args<never, ${operationVariablesTypes}>, 'query'>) {
-  return Urql.use${operationType}<${operationResultType}, ${operationVariablesTypes}>({ query: ${documentVariableName}, ...options });
+export function use${operationName}(options?: Omit<Urql.Use${operationType}Args<never, ${operationVariablesTypes} | undefined>, 'query'>) {
+  return Urql.use${operationType}<${operationResultType}, ${operationVariablesTypes} | undefined>({ query: ${documentVariableName}, variables: undefined, ...options });
 };`;
   }
 

diff --git a/packages/plugins/typescript/vue-urql/tests/__snapshots__/urql.spec.ts.snap b/packages/plugins/typescript/vue-urql/tests/__snapshots__/urql.spec.ts.snap
@@ -13,8 +13,8 @@ export const ListenToCommentsDocument = gql\`
 }
     \`;
 
-export function useListenToCommentsSubscription<R = ListenToCommentsSubscription>(options: Omit<Urql.UseSubscriptionArgs<never, ListenToCommentsSubscriptionVariables>, 'query'>, handler?: Urql.SubscriptionHandlerArg<ListenToCommentsSubscription, R>) {
-  return Urql.useSubscription<ListenToCommentsSubscription, R, ListenToCommentsSubscriptionVariables>({ query: ListenToCommentsDocument, ...options }, handler);
+export function useListenToCommentsSubscription<R = ListenToCommentsSubscription>(options?: Omit<Urql.UseSubscriptionArgs<never, ListenToCommentsSubscriptionVariables | undefined>, 'query'>, handler?: Urql.SubscriptionHandlerArg<ListenToCommentsSubscription, R>) {
+  return Urql.useSubscription<ListenToCommentsSubscription, R, ListenToCommentsSubscriptionVariables | undefined>({ query: ListenToCommentsDocument, variables: undefined, ...options }, handler);
 };"
 `;
 
@@ -24,7 +24,7 @@ import * as Urql from '@urql/vue';
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
 
-export function useTestQuery(options: Omit<Urql.UseQueryArgs<never, Operations.TestQueryVariables>, 'query'>) {
-  return Urql.useQuery<Operations.TestQuery, Operations.TestQueryVariables>({ query: Operations.TestDocument, ...options });
+export function useTestQuery(options?: Omit<Urql.UseQueryArgs<never, Operations.TestQueryVariables | undefined>, 'query'>) {
+  return Urql.useQuery<Operations.TestQuery, Operations.TestQueryVariables | undefined>({ query: Operations.TestDocument, variables: undefined, ...options });
 };"
 `;
diff --git a/packages/plugins/typescript/vue-urql/tests/urql.spec.ts b/packages/plugins/typescript/vue-urql/tests/urql.spec.ts
@@ -477,8 +477,8 @@ query MyFeed {
       )) as Types.ComplexPluginOutput;
 
       expect(content.content).toBeSimilarStringTo(`
-export function useFeedQuery(options: Omit<Urql.UseQueryArgs<never, FeedQueryVariables>, 'query'>) {
-  return Urql.useQuery<FeedQuery, FeedQueryVariables>({ query: FeedDocument, ...options });
+export function useFeedQuery(options?: Omit<Urql.UseQueryArgs<never, FeedQueryVariables | undefined>, 'query'>) {
+  return Urql.useQuery<FeedQuery, FeedQueryVariables | undefined>({ query: FeedDocument, variables: undefined, ...options });
 };`);
 
       expect(content.content).toBeSimilarStringTo(`
@@ -524,8 +524,8 @@ export function useSubmitRepositoryMutation() {
       )) as Types.ComplexPluginOutput;
 
       expect(content.content).toBeSimilarStringTo(`
-      export function useListenToCommentsSubscription<R = ListenToCommentsSubscription>(options: Omit<Urql.UseSubscriptionArgs<never, ListenToCommentsSubscriptionVariables>, 'query'>, handler?: Urql.SubscriptionHandlerArg<ListenToCommentsSubscription, R>) {
-        return Urql.useSubscription<ListenToCommentsSubscription, R, ListenToCommentsSubscriptionVariables>({ query: ListenToCommentsDocument, ...options }, handler);
+      export function useListenToCommentsSubscription<R = ListenToCommentsSubscription>(options?: Omit<Urql.UseSubscriptionArgs<never, ListenToCommentsSubscriptionVariables | undefined>, 'query'>, handler?: Urql.SubscriptionHandlerArg<ListenToCommentsSubscription, R>) {
+        return Urql.useSubscription<ListenToCommentsSubscription, R, ListenToCommentsSubscriptionVariables | undefined>({ query: ListenToCommentsDocument, variables: undefined, ...options }, handler);
       };`);
       await validateTypeScript(content, schema, docs, {});
       expect(mergeOutputs([content])).toMatchSnapshot();