fix(typescript-vue-apollo): make lazy query's variables optional (#557)

* fix(typescript-vue-apollo): make lazy query's variables optional * Add changeset * fix(typescript-vue-apollo): don't use default for non-nullable variables the whole parameter must be optional instead
dotansimha · Feb 2, 2024 · c2b4a1b · c2b4a1b
1 parent 4205f09
commit c2b4a1b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/fuzzy-cars-stare.md b/.changeset/fuzzy-cars-stare.md
@@ -0,0 +1,5 @@
+---
+"@graphql-codegen/typescript-vue-apollo": patch
+---
+
+Make lazy query's variables optional
diff --git a/dev-test/githunt/types.vueApollo.ts b/dev-test/githunt/types.vueApollo.ts
@@ -521,7 +521,7 @@ export function useCommentQuery(
   );
 }
 export function useCommentLazyQuery(
-  variables:
+  variables?:
     | CommentQueryVariables
     | VueCompositionApi.Ref<CommentQueryVariables>
     | ReactiveFunction<CommentQueryVariables>,
@@ -664,7 +664,7 @@ export function useFeedQuery(
   );
 }
 export function useFeedLazyQuery(
-  variables:
+  variables?:
     | FeedQueryVariables
     | VueCompositionApi.Ref<FeedQueryVariables>
     | ReactiveFunction<FeedQueryVariables>,

diff --git a/packages/plugins/typescript/vue-apollo/src/visitor.ts b/packages/plugins/typescript/vue-apollo/src/visitor.ts
@@ -245,12 +245,10 @@ export class VueApolloVisitor extends ClientSideBaseVisitor<
         useTypesPrefix: false,
       });
 
-      const lazyOperationType = 'LazyQuery';
-
       compositionFunctions.push(
         this.buildCompositionFunction({
           operationName: lazyOperationName,
-          operationType: lazyOperationType,
+          operationType: 'LazyQuery',
           operationResultType,
           operationVariablesTypes,
           operationHasNonNullableVariable,
@@ -278,8 +276,10 @@ export class VueApolloVisitor extends ClientSideBaseVisitor<
     operationHasVariables,
     documentNodeVariable,
   }: BuildCompositionFunctions): string {
+    const operationVariablesOptionalModifier =
+      operationType === 'LazyQuery' && operationHasNonNullableVariable ? '?' : '';
     const variables = operationHasVariables
-      ? `variables: ${operationVariablesTypes} | VueCompositionApi.Ref<${operationVariablesTypes}> | ReactiveFunction<${operationVariablesTypes}>${
+      ? `variables${operationVariablesOptionalModifier}: ${operationVariablesTypes} | VueCompositionApi.Ref<${operationVariablesTypes}> | ReactiveFunction<${operationVariablesTypes}>${
           operationHasNonNullableVariable ? '' : ' = {}'
         }, `
       : '';

diff --git a/packages/plugins/typescript/vue-apollo/tests/vue-apollo.spec.ts b/packages/plugins/typescript/vue-apollo/tests/vue-apollo.spec.ts
@@ -874,9 +874,9 @@ query MyFeed {
         }`,
       );
 
-      // lazy query with required variables
+      // lazy query with optional variables, see https://github.com/dotansimha/graphql-code-generator-community/issues/438
       expect(content.content).toBeSimilarStringTo(
-        `export function useFeedLazyQuery(variables: FeedQueryVariables | VueCompositionApi.Ref<FeedQueryVariables> | ReactiveFunction<FeedQueryVariables>, options: VueApolloComposable.UseQueryOptions<FeedQuery, FeedQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<FeedQuery, FeedQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<FeedQuery, FeedQueryVariables>> = {}) {
+        `export function useFeedLazyQuery(variables?: FeedQueryVariables | VueCompositionApi.Ref<FeedQueryVariables> | ReactiveFunction<FeedQueryVariables>, options: VueApolloComposable.UseQueryOptions<FeedQuery, FeedQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<FeedQuery, FeedQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<FeedQuery, FeedQueryVariables>> = {}) {
            return VueApolloComposable.useLazyQuery<FeedQuery, FeedQueryVariables>(FeedDocument, variables, options);
         }`,
       );