fix(ts): allow undefined for optional variables (#962)

packages/vue-apollo-composable/src/useMutation.ts

@@ -17,31 +17,12 @@ export interface UseMutationOptions<
   clientId?: string
 }
 
-/**
- * `useMutation` options for mutations that don't use variables.
- */
-export type UseMutationOptionsNoVariables<
-  TResult = any,
-  TVariables = OperationVariables
-> = Omit<UseMutationOptions<TResult, TVariables>, 'variables'>
+export type MutateOverrideOptions = Pick<UseMutationOptions<any, OperationVariables>, 'update' | 'optimisticResponse' | 'context' | 'updateQueries' | 'refetchQueries' | 'awaitRefetchQueries' | 'errorPolicy' | 'fetchPolicy' | 'clientId'>
+export type MutateResult<TResult> = Promise<FetchResult<TResult, Record<string, any>, Record<string, any>>>
+export type MutateFunction<TResult, TVariables> = (variables?: TVariables, overrideOptions?: MutateOverrideOptions) => MutateResult<TResult>
 
-/**
- * `useMutation` options for mutations require variables.
- */
-export interface UseMutationOptionsWithVariables<
-  TResult = any,
-  TVariables = OperationVariables
-> extends UseMutationOptions<TResult, TVariables> {
-  variables: TVariables
-}
-
-type MutateOverrideOptions = Pick<UseMutationOptions<any, OperationVariables>, 'update' | 'optimisticResponse' | 'context' | 'updateQueries' | 'refetchQueries' | 'awaitRefetchQueries' | 'errorPolicy' | 'fetchPolicy' | 'clientId'>
-type MutateResult<TResult> = Promise<FetchResult<TResult, Record<string, any>, Record<string, any>>>
-export type MutateWithOptionalVariables<TResult, TVariables> = (variables?: TVariables, overrideOptions?: MutateOverrideOptions) => MutateResult<TResult>
-export type MutateWithRequiredVariables<TResult, TVariables> = (variables: TVariables, overrideOptions?: MutateOverrideOptions) => MutateResult<TResult>
-
-export interface UseMutationReturn<TResult, TVariables, Mutate extends MutateWithOptionalVariables<TResult, TVariables> = MutateWithOptionalVariables<TResult, TVariables>> {
-  mutate: Mutate
+export interface UseMutationReturn<TResult, TVariables> {
+  mutate: MutateFunction<TResult, TVariables>
   loading: Ref<boolean>
   error: Ref<Error>
   called: Ref<boolean>
@@ -58,7 +39,7 @@ export interface UseMutationReturn<TResult, TVariables, Mutate extends MutateWit
  */
 export function useMutation<TResult = any, TVariables extends OperationVariables = OperationVariables>(
   document: DocumentNode | ReactiveFunction<DocumentNode>,
-  options?: UseMutationOptionsWithVariables<TResult, TVariables> | ReactiveFunction<UseMutationOptionsWithVariables<TResult, TVariables>>
+  options?: UseMutationOptions<TResult, TVariables> | ReactiveFunction<UseMutationOptions<TResult, TVariables>>
 ): UseMutationReturn<TResult, TVariables>
 
 /**
@@ -66,8 +47,8 @@ export function useMutation<TResult = any, TVariables extends OperationVariables
  */
 export function useMutation<TResult = any, TVariables extends OperationVariables = OperationVariables>(
   document: DocumentNode | ReactiveFunction<DocumentNode>,
-  options?: UseMutationOptionsNoVariables<TResult, undefined> | ReactiveFunction<UseMutationOptionsNoVariables<TResult, undefined>>
-): UseMutationReturn<TResult, TVariables, MutateWithRequiredVariables<TResult, TVariables>>
+  options?: UseMutationOptions<TResult, undefined> | ReactiveFunction<UseMutationOptions<TResult, undefined>>
+): UseMutationReturn<TResult, TVariables>
 
 export function useMutation<
   TResult,

packages/vue-apollo-composable/src/useQuery.ts

@@ -65,6 +65,21 @@ export function useQuery<TResult = any>(
   document: DocumentNode | Ref<DocumentNode> | ReactiveFunction<DocumentNode>
 ): UseQueryReturn<TResult, undefined>
 
+/**
+ * Use a query that has optional variables but not options
+ */
+export function useQuery<TResult = any, TVariables extends OperationVariables = OperationVariables>(
+  document: DocumentNode | Ref<DocumentNode> | ReactiveFunction<DocumentNode>
+): UseQueryReturn<TResult, TVariables>
+
+/**
+ * Use a query that has required variables but not options
+ */
+export function useQuery<TResult = any, TVariables extends OperationVariables = OperationVariables>(
+  document: DocumentNode | Ref<DocumentNode> | ReactiveFunction<DocumentNode>,
+  variables: TVariables
+): UseQueryReturn<TResult, TVariables>
+
 /**
  * Use a query that requires options but not variables.
  */
@@ -74,14 +89,6 @@ export function useQuery<TResult = any, TVariables extends undefined = undefined
   options: UseQueryOptions<TResult, TVariables> | Ref<UseQueryOptions<TResult, TVariables>> | ReactiveFunction<UseQueryOptions<TResult, TVariables>>
 ): UseQueryReturn<TResult, TVariables>
 
-/**
- * Use a query that requires variables.
- */
-export function useQuery<TResult = any, TVariables extends OperationVariables = OperationVariables>(
-  document: DocumentNode | Ref<DocumentNode> | ReactiveFunction<DocumentNode>,
-  variables: TVariables | Ref<TVariables> | ReactiveFunction<TVariables>
-): UseQueryReturn<TResult, TVariables>
-
 /**
  * Use a query that requires variables and options.
  */

packages/vue-apollo-composable/src/useSubscription.ts

@@ -66,6 +66,13 @@ export function useSubscription<TResult = any, TVariables extends OperationVaria
   variables: TVariables | Ref<TVariables> | ReactiveFunction<TVariables>
 ): UseSubscriptionReturn<TResult, TVariables>
 
+/**
+ * Use a subscription that has optional variables.
+ */
+export function useSubscription<TResult = any, TVariables extends OperationVariables = OperationVariables>(
+  document: DocumentNode | Ref<DocumentNode> | ReactiveFunction<DocumentNode>
+): UseSubscriptionReturn<TResult, TVariables>
+
 /**
  * Use a subscription that requires variables and options.
  */

packages/vue-apollo-composable/tests/types/useMutation-types.test.ts

@@ -1,5 +1,5 @@
 import { FetchResult } from "apollo-link";
-import { useMutation, MutateWithOptionalVariables, MutateWithRequiredVariables } from "../../src";
+import { useMutation, MutateFunction } from "../../src";
 import {
   ExampleDocument,
   ExampleUpdateMutation,
@@ -137,6 +137,37 @@ import { assertExactType } from "./assertions";
   });
 }
 
+// =============================================================================
+// With all types and without variables because the query has optional variables
+// - TResult should be the mutation type
+// - TVariables should be the variables type
+// =============================================================================
+{
+  const useMutationAllTyped = useMutation<ExampleUpdateMutation, ExampleUpdateMutationVariables>(ExampleDocument);
+
+  useMutationAllTyped.mutate({ id: "2", example: { name: "remix" } }, {});
+
+  useMutationAllTyped.onDone(param => {
+    assertExactType<typeof param, FetchResult<ExampleUpdateMutation> | undefined>(param);
+    assertExactType<typeof param.data.exampleUpdate, ExampleUpdatePayload>(
+      param.data.exampleUpdate
+    );
+  });
+}
+
+{
+  const useMutationAllTyped = useMutation<ExampleUpdateMutation, ExampleUpdateMutationVariables>(ExampleDocument);
+
+  useMutationAllTyped.mutate({ id: "2", example: { name: "remix" } }, {});
+
+  useMutationAllTyped.onDone(param => {
+    assertExactType<typeof param, FetchResult<ExampleUpdateMutation> | undefined>(param);
+    assertExactType<typeof param.data.exampleUpdate, ExampleUpdatePayload>(
+      param.data.exampleUpdate
+    );
+  });
+}
+
 // =============================================================================
 // With all things typed and with options and variables
 // - TResult should be the mutation type
@@ -170,7 +201,7 @@ import { assertExactType } from "./assertions";
     }
   );
 
-  assertExactType<typeof withVariablesInOptions.mutate, MutateWithOptionalVariables<ExampleUpdateMutation, ExampleUpdateMutationVariables>>(
+  assertExactType<typeof withVariablesInOptions.mutate, MutateFunction<ExampleUpdateMutation, ExampleUpdateMutationVariables>>(
     withVariablesInOptions.mutate
   )
 
@@ -193,7 +224,7 @@ import { assertExactType } from "./assertions";
     ExampleDocument
   );
 
-  assertExactType<typeof withNoOptions.mutate, MutateWithRequiredVariables<ExampleUpdateMutation, ExampleUpdateMutationVariables>>(
+  assertExactType<typeof withNoOptions.mutate, MutateFunction<ExampleUpdateMutation, ExampleUpdateMutationVariables>>(
     withNoOptions.mutate
   )
 
@@ -236,7 +267,7 @@ import { assertExactType } from "./assertions";
     }
   );
 
-  assertExactType<typeof withNoVariablesInOptions.mutate, MutateWithRequiredVariables<ExampleUpdateMutation, ExampleUpdateMutationVariables>>(
+  assertExactType<typeof withNoVariablesInOptions.mutate, MutateFunction<ExampleUpdateMutation, ExampleUpdateMutationVariables>>(
     withNoVariablesInOptions.mutate
   )
 

packages/vue-apollo-composable/tests/types/useQuery-types.test.ts

@@ -71,6 +71,23 @@ import { assertExactType } from "./assertions";
   );
 }
 
+// =============================================================================
+// With all types and without variables because the query has optional variables
+// - TResult should be the query type
+// - TVariables should be the variables type
+// =============================================================================
+{
+  const useQueryAllTyped = useQuery<ExampleQuery, ExampleQueryVariables>(ExampleDocument);
+
+  const useQueryAllTypedResult = useQueryAllTyped.result.value;
+  assertExactType<typeof useQueryAllTypedResult, ExampleQuery>(useQueryAllTypedResult);
+
+  const useQueryAllTypedVariables = useQueryAllTyped.variables.value;
+  assertExactType<typeof useQueryAllTypedVariables, ExampleQueryVariables>(
+    useQueryAllTypedVariables
+  );
+}
+
 // =============================================================================
 // With query types, and no variables
 // - TResult should be the query type

packages/vue-apollo-composable/tests/types/useSubscription-types.test.ts

@@ -110,6 +110,33 @@ import { assertExactType } from "./assertions";
   useSubscription_AllTyped.onResult(result => result?.data?.exampleUpdated.name);
 }
 
+// =============================================================================
+// With all types and without variables because the query has optional variables
+// - TResult should be the subscription type
+// - TVariables should be the variables type
+// =============================================================================
+{
+  const useSubscription_AllTyped = useSubscription<
+    ExampleUpdatedSubscription,
+    ExampleUpdatedSubscriptionVariables
+  >(ExampleDocument);
+
+  // Result type should match the passed in subscription type
+  const useSubscription_AllTypedResult = useSubscription_AllTyped.result.value;
+  assertExactType<typeof useSubscription_AllTypedResult, ExampleUpdatedSubscription>(
+    useSubscription_AllTypedResult
+  );
+
+  // Variables type should match the passed in variables type
+  const useSubscription_AllTypedVariables = useSubscription_AllTyped.variables.value;
+  assertExactType<typeof useSubscription_AllTypedVariables, ExampleUpdatedSubscriptionVariables>(
+    useSubscription_AllTypedVariables
+  );
+
+  // Result data type should be the passed in result
+  useSubscription_AllTyped.onResult(result => result?.data?.exampleUpdated.name);
+}
+
 // =============================================================================
 // With subscription types, and no variables
 // - TResult should be the subscription type