fix(vue): fix variables typing (wip)

urql-graphql · Jan 8, 2025 · cce4f84 · cce4f84
1 parent e7f08e0
commit cce4f84
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 52 deletions.
diff --git a/packages/core/src/utils/request.ts b/packages/core/src/utils/request.ts
@@ -147,8 +147,8 @@ export const keyDocument = (node: string | DocumentNode): KeyedDocumentNode => {
 
 /** Creates a `GraphQLRequest` from the passed parameters.
  *
- * @param q - A string of a document or a {@link DocumentNode}
- * @param variables - A variables object for the defined GraphQL operation.
+ * @param _query - A string of a document or a {@link DocumentNode}
+ * @param _variables - A variables object for the defined GraphQL operation.
  * @returns A {@link GraphQLRequest}
  *
  * @remarks

diff --git a/packages/vue-urql/src/useQuery.ts b/packages/vue-urql/src/useQuery.ts
@@ -18,7 +18,7 @@ import type {
 
 import { useClient } from './useClient';
 
-import type { MaybeRefOrGetter, MaybeRefOrGetterObj } from './utils';
+import type { MaybeRefOrGetter } from './utils';
 import { useRequestState, useClientState } from './utils';
 
 /** Input arguments for the {@link useQuery} function.
@@ -73,9 +73,7 @@ export type UseQueryArgs<
    * documentation on the `pause` option.
    */
   pause?: MaybeRefOrGetter<boolean>;
-} & MaybeRefOrGetterObj<
-  GraphQLRequestParams<Data, MaybeRefOrGetterObj<Variables>>
->;
+} & GraphQLRequestParams<Data, MaybeRefOrGetter<Variables>>;
 
 /** State of the current query, your {@link useQuery} function is executing.
  *
@@ -248,11 +246,10 @@ export function callUseQuery<T = any, V extends AnyVariables = AnyVariables>(
   const { fetching, operation, extensions, stale, error, hasNext } =
     useRequestState<T, V>();
 
-  const { isPaused, source, pause, resume, execute, teardown } = useClientState(
-    args,
-    client,
-    'executeQuery'
-  );
+  const { isPaused, source, pause, resume, execute, teardown } = useClientState<
+    T,
+    V
+  >(args, client, 'executeQuery');
 
   const teardownQuery = watchEffect(
     onInvalidate => {

diff --git a/packages/vue-urql/src/useSubscription.ts b/packages/vue-urql/src/useSubscription.ts
@@ -16,7 +16,7 @@ import type {
 
 import { useClient } from './useClient';
 
-import type { MaybeRefOrGetter, MaybeRefOrGetterObj } from './utils';
+import type { MaybeRefOrGetter } from './utils';
 import { useRequestState, useClientState } from './utils';
 
 /** Input arguments for the {@link useSubscription} function.
@@ -55,9 +55,7 @@ export type UseSubscriptionArgs<
    * ```
    */
   context?: MaybeRefOrGetter<Partial<OperationContext>>;
-} & MaybeRefOrGetterObj<
-  GraphQLRequestParams<Data, MaybeRefOrGetterObj<Variables>>
->;
+} & GraphQLRequestParams<Data, MaybeRefOrGetter<Variables>>;
 
 /** Combines previous data with an incoming subscription result’s data.
  *
@@ -248,11 +246,10 @@ export function callUseSubscription<
     V
   >();
 
-  const { isPaused, source, pause, resume, execute, teardown } = useClientState(
-    args,
-    client,
-    'executeSubscription'
-  );
+  const { isPaused, source, pause, resume, execute, teardown } = useClientState<
+    T,
+    V
+  >(args, client, 'executeSubscription');
 
   const teardownSubscription = watchEffect(onInvalidate => {
     if (source.value) {

diff --git a/packages/vue-urql/src/utils.ts b/packages/vue-urql/src/utils.ts
@@ -3,6 +3,7 @@ import type {
   Client,
   CombinedError,
   DocumentInput,
+  GraphQLRequest,
   Operation,
   OperationContext,
   OperationResult,
@@ -15,49 +16,28 @@ import type { UseSubscriptionArgs } from './useSubscription';
 import type { UseQueryArgs } from './useQuery';
 
 export type MaybeRefOrGetter<T> = T | (() => T) | Ref<T>;
-export type MaybeRefOrGetterObj<T> =
-  | MaybeRefOrGetter<T>
-  | (T extends {} ? { [K in keyof T]: MaybeRefOrGetter<T[K]> } : T);
 
-type UnwrapDeep<T> = T extends Ref<infer V> | (() => infer V)
-  ? UnwrapDeep<V>
-  : T extends {}
-    ? { [K in keyof T]: UnwrapDeep<T[K]> }
-    : T;
-
-const isFunction = <T>(
-  val: MaybeRefOrGetter<T> | MaybeRefOrGetterObj<T>
-): val is () => T => typeof val === 'function';
-const isPlainObject = (val: unknown): val is object =>
-  typeof val === 'object' && val !== null && val.constructor === Object;
+const isFunction = <T>(val: MaybeRefOrGetter<T>): val is () => T =>
+  typeof val === 'function';
 
 const toValue = <T>(source: MaybeRefOrGetter<T>): T =>
   isFunction(source) ? source() : unref(source);
 
-const toValueDeep = <T>(
-  source: MaybeRefOrGetter<T> | MaybeRefOrGetterObj<T>
-): UnwrapDeep<T> =>
-  (isRef<T>(source) || isFunction<T>(source)
-    ? toValueDeep(toValue(source))
-    : Array.isArray(source)
-      ? source.map(val => toValueDeep(val))
-      : isPlainObject(source)
-        ? Object.fromEntries(
-            Object.entries(source).map(([key, val]) => [key, toValueDeep(val)])
-          )
-        : source) as UnwrapDeep<T>;
-
 export const createRequestWithArgs = <
   T = any,
   V extends AnyVariables = AnyVariables,
 >(
   args:
     | UseQueryArgs<T, V>
     | UseSubscriptionArgs<T, V>
-    | { query: MaybeRefOrGetter<DocumentInput<T, V>>; variables: V }
-) => {
-  return createRequest<T, V>(toValue(args.query), toValueDeep(args.variables));
-};
+    | { query: DocumentInput<T, V>; variables: V }
+): GraphQLRequest<T, V> =>
+  createRequest<T, V>(
+    args.query,
+    'variables' in args
+      ? toValue(args.variables as MaybeRefOrGetter<V>)
+      : ({} as V)
+  );
 
 export const useRequestState = <
   T = any,
@@ -93,7 +73,7 @@ export function useClientState<T = any, V extends AnyVariables = AnyVariables>(
       ? computed(args.pause)
       : ref(!!args.pause);
 
-  const request = computed(() => createRequestWithArgs(args));
+  const request = computed(() => createRequestWithArgs<T, V>(args));
 
   const requestOptions = computed(() => {
     return 'requestPolicy' in args