feat: accept several options as RefOrGetter

.changeset/curvy-lies-compete.md

@@ -0,0 +1,5 @@
+---
+'villus': patch
+---
+
+feat: accept several options as RefOrGetter

packages/villus/src/types.ts

@@ -29,10 +29,6 @@ export interface ObservableLike<T> {
   subscribe(observer: ObserverLike<T>): Unsubscribable;
 }
 
-export type MaybeRef<T> = T | Ref<T>;
-
-export type MaybeLazyOrRef<T> = MaybeRef<T> | (() => T);
-
 export type OperationType = 'query' | 'mutation' | 'subscription';
 
 export type AfterQueryCallback = (

packages/villus/src/useMutation.ts

@@ -1,11 +1,11 @@
-import { ref, Ref, unref, nextTick } from 'vue';
-import { MaybeRef, OperationResult, QueryExecutionContext } from './types';
+import { ref, Ref, nextTick, MaybeRefOrGetter, toValue } from 'vue';
+import { OperationResult, QueryExecutionContext } from './types';
 import { CombinedError } from './utils';
 import { Operation, QueryVariables } from '../../shared/src';
 import { Client, resolveClient } from './client';
 
 export interface MutationExecutionOptions<TData> {
-  context: MaybeRef<QueryExecutionContext>;
+  context: MaybeRefOrGetter<QueryExecutionContext>;
   client?: Client;
   clearCacheTags?: string[];
   refetchTags?: string[];
@@ -47,7 +47,7 @@ export function useMutation<TData = any, TVars = QueryVariables>(
         variables: vars as TVars, // FIXME: fix this casting
         clearCacheTags: [...(opts?.clearCacheTags || []), ...(opts?.refetchTags || [])],
       },
-      unref(opts?.context),
+      toValue(opts?.context),
     );
 
     lastPendingOperation = pendingExecution;

packages/villus/src/useQuery.ts

@@ -1,21 +1,14 @@
-import { isRef, onMounted, Ref, ref, unref, watch, getCurrentInstance, onBeforeUnmount } from 'vue';
+import { isRef, onMounted, Ref, ref, watch, getCurrentInstance, onBeforeUnmount, MaybeRefOrGetter, toValue } from 'vue';
 import stringify from 'fast-json-stable-stringify';
-import {
-  CachePolicy,
-  MaybeLazyOrRef,
-  MaybeRef,
-  OperationResult,
-  QueryExecutionContext,
-  QueryPredicateOrSignal,
-} from './types';
-import { hash, CombinedError, unwrap, isWatchable, unravel, useCallback } from './utils';
+import { CachePolicy, OperationResult, QueryExecutionContext, QueryPredicateOrSignal } from './types';
+import { hash, CombinedError, isWatchable, unravel, useCallback } from './utils';
 import { Operation, QueryVariables } from '../../shared/src';
 import { Client, resolveClient } from './client';
 
 export interface QueryCompositeOptions<TData, TVars> {
-  query: MaybeRef<Operation<TData, TVars>['query']>;
-  variables?: MaybeLazyOrRef<TVars>;
-  context?: MaybeRef<QueryExecutionContext>;
+  query: MaybeRefOrGetter<Operation<TData, TVars>['query']>;
+  variables?: MaybeRefOrGetter<TVars>;
+  context?: MaybeRefOrGetter<QueryExecutionContext>;
   cachePolicy?: CachePolicy;
   fetchOnMount?: boolean;
   client?: Client;
@@ -120,7 +113,7 @@ function useQuery<TData = any, TVars = QueryVariables, TMappedData = TData | nul
   }
 
   async function execute(overrideOpts?: Partial<QueryExecutionOpts<TVars>>) {
-    const vars = unwrap(variables) || ({} as TVars);
+    const vars = toValue(variables) || ({} as TVars);
     // result won't change if execution is skipped
     if (unravel(skip, vars)) {
       isFetching.value = false;
@@ -134,12 +127,12 @@ function useQuery<TData = any, TVars = QueryVariables, TMappedData = TData | nul
     isFetching.value = true;
     const pendingExecution = client.executeQuery<TData, TVars>(
       {
-        query: isRef(query) ? query.value : query,
-        variables: unwrap(overrideOpts?.variables || vars),
+        query: toValue(query),
+        variables: toValue(overrideOpts?.variables || vars),
         cachePolicy: overrideOpts?.cachePolicy || cachePolicy,
         tags: opts?.tags,
       },
-      unref(opts?.context),
+      toValue(opts?.context),
       onResultChanged,
     );
 
@@ -190,7 +183,7 @@ function useQuery<TData = any, TVars = QueryVariables, TMappedData = TData | nul
     }
 
     watch(
-      () => unwrap(variables),
+      () => toValue(variables),
       newValue => {
         const id = hash(stringify(newValue));
         // prevents duplicate queries.

packages/villus/src/useSubscription.ts

@@ -1,19 +1,23 @@
-import { ref, Ref, onMounted, unref, onBeforeUnmount, watch, isRef, getCurrentInstance, computed } from 'vue';
 import {
-  Unsubscribable,
-  OperationResult,
-  MaybeRef,
-  StandardOperationResult,
-  QueryPredicateOrSignal,
-  MaybeLazyOrRef,
-} from './types';
-import { CombinedError, isWatchable, unravel, unwrap, debounceAsync, isEqual } from './utils';
+  ref,
+  Ref,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  isRef,
+  getCurrentInstance,
+  computed,
+  MaybeRefOrGetter,
+  toValue,
+} from 'vue';
+import { Unsubscribable, OperationResult, StandardOperationResult, QueryPredicateOrSignal } from './types';
+import { CombinedError, isWatchable, debounceAsync, isEqual, unravel } from './utils';
 import { Operation, QueryVariables } from '../../shared/src';
 import { Client, resolveClient } from './client';
 
 interface SubscriptionCompositeOptions<TData, TVars, TResult = TData> {
-  query: MaybeRef<Operation<TData, TVars>['query']>;
-  variables?: MaybeLazyOrRef<TVars>;
+  query: MaybeRefOrGetter<Operation<TData, TVars>['query']>;
+  variables?: MaybeRefOrGetter<TVars>;
   skip?: QueryPredicateOrSignal<TVars>;
   paused?: QueryPredicateOrSignal<TVars>;
   client?: Client;
@@ -54,8 +58,8 @@ export function useSubscription<TData = any, TResult = TData, TVars = QueryVaria
 
     isFetching.value = true;
     const result = await client.executeSubscription<TData, TVars>({
-      query: unref(query),
-      variables: unwrap(variables),
+      query: toValue(query),
+      variables: toValue(variables),
     });
 
     observer = result.subscribe({
@@ -100,7 +104,7 @@ export function useSubscription<TData = any, TResult = TData, TVars = QueryVaria
   vm && onBeforeUnmount(unsubscribe);
 
   function shouldSkip() {
-    return unravel(skip, unwrap(variables) || {});
+    return unravel(skip, toValue(variables) || ({} as TVars));
   }
 
   if (isWatchable(paused)) {

packages/villus/src/utils/common.ts

@@ -1,32 +1,23 @@
-import { isReactive, isRef, Ref, unref, nextTick } from 'vue';
-import { MaybeLazyOrRef, QueryPredicateOrSignal, MaybeRef } from '../types';
+import { isReactive, isRef, Ref, nextTick, MaybeRefOrGetter, toValue } from 'vue';
+import { QueryPredicateOrSignal } from '../types';
 import stringify from 'fast-json-stable-stringify';
 import { QueryVariables } from '../../../shared/src';
 
 export function unravel<TVars = QueryVariables>(
   signal: QueryPredicateOrSignal<TVars> | undefined,
-  vars: MaybeRef<TVars>,
+  vars: MaybeRefOrGetter<TVars>,
 ) {
   if (isRef(signal)) {
     return signal.value;
   }
 
   if (typeof signal === 'function') {
-    return signal(unref(vars));
+    return signal(toValue(vars));
   }
 
   return signal;
 }
 
-export function unwrap<TValue>(val: MaybeLazyOrRef<TValue>) {
-  if (isRef(val)) {
-    return unref(val);
-  }
-
-  // TODO: typescript bug to fix here
-  return typeof val === 'function' ? (val as any)() : val;
-}
-
 export function isWatchable<T>(val: unknown): val is Ref<T> {
   return isRef(val) || isReactive(val) || typeof val === 'function';
 }