diff --git a/packages/core/src/utils/request.ts b/packages/core/src/utils/request.ts index 41af16f3dc..29af50f6a4 100644 --- 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 index bc80c7c77b..35b3d6f891 100644 --- 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; -} & MaybeRefOrGetterObj< - GraphQLRequestParams> ->; +} & GraphQLRequestParams>; /** State of the current query, your {@link useQuery} function is executing. * @@ -248,11 +246,10 @@ export function callUseQuery( const { fetching, operation, extensions, stale, error, hasNext } = useRequestState(); - 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 index 7f2462f50c..b99fbe9496 100644 --- 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>; -} & MaybeRefOrGetterObj< - GraphQLRequestParams> ->; +} & GraphQLRequestParams>; /** 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 index 5eecb751a5..1998ee5513 100644 --- 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,38 +16,13 @@ import type { UseSubscriptionArgs } from './useSubscription'; import type { UseQueryArgs } from './useQuery'; export type MaybeRefOrGetter = T | (() => T) | Ref; -export type MaybeRefOrGetterObj = - | MaybeRefOrGetter - | (T extends {} ? { [K in keyof T]: MaybeRefOrGetter } : T); -type UnwrapDeep = T extends Ref | (() => infer V) - ? UnwrapDeep - : T extends {} - ? { [K in keyof T]: UnwrapDeep } - : T; - -const isFunction = ( - val: MaybeRefOrGetter | MaybeRefOrGetterObj -): val is () => T => typeof val === 'function'; -const isPlainObject = (val: unknown): val is object => - typeof val === 'object' && val !== null && val.constructor === Object; +const isFunction = (val: MaybeRefOrGetter): val is () => T => + typeof val === 'function'; const toValue = (source: MaybeRefOrGetter): T => isFunction(source) ? source() : unref(source); -const toValueDeep = ( - source: MaybeRefOrGetter | MaybeRefOrGetterObj -): UnwrapDeep => - (isRef(source) || isFunction(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; - export const createRequestWithArgs = < T = any, V extends AnyVariables = AnyVariables, @@ -54,10 +30,14 @@ export const createRequestWithArgs = < args: | UseQueryArgs | UseSubscriptionArgs - | { query: MaybeRefOrGetter>; variables: V } -) => { - return createRequest(toValue(args.query), toValueDeep(args.variables)); -}; + | { query: DocumentInput; variables: V } +): GraphQLRequest => + createRequest( + args.query, + 'variables' in args + ? toValue(args.variables as MaybeRefOrGetter) + : ({} as V) + ); export const useRequestState = < T = any, @@ -93,7 +73,7 @@ export function useClientState( ? computed(args.pause) : ref(!!args.pause); - const request = computed(() => createRequestWithArgs(args)); + const request = computed(() => createRequestWithArgs(args)); const requestOptions = computed(() => { return 'requestPolicy' in args