chore(types): use vuejs reactivity types

.test-todo/test-ssr/package.json

@@ -39,7 +39,7 @@
     "@vue/cli-plugin-e2e-cypress": "^4.0.0",
     "@vue/cli-plugin-router": "^4.0.0",
     "@vue/cli-service": "^4.0.0",
-    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/eslint-config-standard": "^8.0.1",
     "graphql-tag": "^2.9.0",
     "start-server-and-test": "^1.10.6",
     "vue-cli-plugin-apollo": "^0.21.3",

package.json

@@ -16,21 +16,21 @@
   },
   "devDependencies": {
     "@akryum/sheep": "^0.5.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "@vue/eslint-config-standard": "^6.1.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "conventional-changelog-cli": "^2.2.2",
     "core-js": "^3.23.2",
     "esbuild": "^0.8.57",
     "esbuild-node-externals": "^1.4.1",
-    "eslint": "^7.32.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-vue": "^7.20.0",
-    "typescript": "^4.7.4"
+    "eslint-plugin-vue": "^9.24.0",
+    "typescript": "^5.4.3"
   },
   "packageManager": "pnpm@9.7.1",
   "pnpm": {

packages/test-e2e/package.json

@@ -30,17 +30,17 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.5",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
     "@vue/cli-plugin-babel": "^5.0.6",
     "@vue/cli-plugin-e2e-cypress": "^5.0.6",
     "@vue/cli-service": "^5.0.6",
     "cypress": "^10.2.0",
     "esbuild": "^0.8.57",
     "esbuild-node-externals": "^1.4.1",
-    "eslint": "^7.32.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-vue": "^7.20.0",
+    "eslint-plugin-vue": "^9.24.0",
     "graphql-tag": "^2.12.6",
     "kill-port": "^1.6.1",
     "start-server-and-test": "^1.14.0",

packages/vue-apollo-composable/package.json

@@ -67,7 +67,7 @@
     "graphql-tag": "^2.12.6",
     "nodemon": "^1.19.4",
     "rimraf": "^5.0.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.4.3",
     "vue": "^3.3.4"
   }
 }

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

@@ -1,8 +1,8 @@
 import { DocumentNode } from 'graphql'
-import { isRef } from 'vue-demi'
 import { useQueryImpl, DocumentParameter, VariablesParameter, OptionsParameter, UseQueryOptions, UseQueryReturn } from './useQuery'
 import type { OperationVariables } from '@apollo/client/core'
 import { isServer } from './util/env.js'
+import { MaybeRefOrGetter } from 'vue-demi'
 
 export interface UseLazyQueryReturn<TResult, TVariables extends OperationVariables> extends UseQueryReturn<TResult, TVariables> {
   /**
@@ -19,9 +19,9 @@ export function useLazyQuery<
   TResult = any,
   TVariables extends Record<string, unknown> = any,
 > (
-  document: DocumentParameter<TResult, TVariables>,
-  variables?: VariablesParameter<TVariables>,
-  options?: OptionsParameter<TResult, TVariables>,
+  document: MaybeRefOrGetter<DocumentParameter<TResult, TVariables>>,
+  variables?: MaybeRefOrGetter<VariablesParameter<TVariables>>,
+  options?: MaybeRefOrGetter<OptionsParameter<TResult, TVariables>>,
 ): UseLazyQueryReturn<TResult, TVariables> {
   const query = useQueryImpl<TResult, TVariables>(document, variables, options, true)
 
@@ -37,7 +37,7 @@ export function useLazyQuery<
       query.variables.value = variables
     }
     if (options) {
-      Object.assign(isRef(query.options) ? query.options.value : query.options, options)
+      Object.assign(query.options.value, options)
     }
     const isFirstRun = query.forceDisabled.value
     if (isFirstRun) {

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

@@ -1,8 +1,7 @@
 import { DocumentNode } from 'graphql'
 import { MutationOptions, OperationVariables, FetchResult, TypedDocumentNode, ApolloError, ApolloClient } from '@apollo/client/core/index.js'
-import { ref, onScopeDispose, isRef, Ref, getCurrentScope, shallowRef, nextTick } from 'vue-demi'
+import { ref, onScopeDispose, Ref, getCurrentScope, shallowRef, nextTick, MaybeRefOrGetter, toValue } from 'vue-demi'
 import { useApolloClient } from './useApolloClient'
-import { ReactiveFunction } from './util/ReactiveFunction'
 import { useEventHook } from './util/useEventHook'
 import { trackMutation } from './util/loadingTracking'
 import { toApolloError } from './util/toApolloError'
@@ -18,8 +17,8 @@ export interface UseMutationOptions<
   throws?: 'auto' | 'always' | 'never'
 }
 
-type DocumentParameter<TResult, TVariables> = DocumentNode | Ref<DocumentNode> | ReactiveFunction<DocumentNode> | TypedDocumentNode<TResult, TVariables> | Ref<TypedDocumentNode<TResult, TVariables>> | ReactiveFunction<TypedDocumentNode<TResult, TVariables>>
-type OptionsParameter<TResult, TVariables> = UseMutationOptions<TResult, TVariables> | Ref<UseMutationOptions<TResult, TVariables>> | ReactiveFunction<UseMutationOptions<TResult, TVariables>>
+type DocumentParameter<TResult, TVariables> = DocumentNode | TypedDocumentNode<TResult, TVariables>
+type OptionsParameter<TResult, TVariables> = UseMutationOptions<TResult, TVariables>
 
 export type MutateOverrideOptions<TResult> = Pick<UseMutationOptions<TResult, OperationVariables>, 'update' | 'optimisticResponse' | 'context' | 'updateQueries' | 'refetchQueries' | 'awaitRefetchQueries' | 'errorPolicy' | 'fetchPolicy' | 'clientId'>
 export type MutateResult<TResult> = Promise<FetchResult<TResult, Record<string, any>, Record<string, any>> | null>
@@ -50,8 +49,8 @@ export function useMutation<
   TResult = any,
   TVariables extends OperationVariables = OperationVariables
 > (
-  document: DocumentParameter<TResult, TVariables>,
-  options: OptionsParameter<TResult, TVariables> = {},
+  document: MaybeRefOrGetter<DocumentParameter<TResult, TVariables>>,
+  options: MaybeRefOrGetter<OptionsParameter<TResult, TVariables>> = {},
 ): UseMutationReturn<TResult, TVariables> {
   const currentScope = getCurrentScope()
   const loading = ref<boolean>(false)
@@ -66,23 +65,9 @@ export function useMutation<
   const { resolveClient } = useApolloClient()
 
   async function mutate (variables?: TVariables | null, overrideOptions: Omit<UseMutationOptions<TResult, TVariables>, 'variables'> = {}) {
-    let currentDocument: DocumentNode
-    if (typeof document === 'function') {
-      currentDocument = document()
-    } else if (isRef(document)) {
-      currentDocument = document.value
-    } else {
-      currentDocument = document
-    }
+    const currentDocument: DocumentNode = toValue(document)
+    const currentOptions: UseMutationOptions<TResult, TVariables> = toValue(options)
 
-    let currentOptions: UseMutationOptions<TResult, TVariables>
-    if (typeof options === 'function') {
-      currentOptions = options()
-    } else if (isRef(options)) {
-      currentOptions = options.value
-    } else {
-      currentOptions = options
-    }
     const client = resolveClient(currentOptions.clientId)
     error.value = null
     loading.value = true

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

@@ -1,7 +1,6 @@
 import {
   ref,
   Ref,
-  unref,
   computed,
   watch,
   onServerPrefetch,
@@ -10,6 +9,8 @@ import {
   onScopeDispose,
   nextTick,
   shallowRef,
+  MaybeRefOrGetter,
+  toRef,
 } from 'vue-demi'
 import { DocumentNode } from 'graphql'
 import type {
@@ -27,9 +28,6 @@ import type {
 } from '@apollo/client/core/index.js'
 import { throttle, debounce } from 'throttle-debounce'
 import { useApolloClient } from './useApolloClient'
-import { ReactiveFunction } from './util/ReactiveFunction'
-import { paramToRef } from './util/paramToRef'
-import { paramToReactive } from './util/paramToReactive'
 import { useEventHook } from './util/useEventHook'
 import { trackQuery } from './util/loadingTracking'
 import { resultErrorsToApolloError, toApolloError } from './util/toApolloError'
@@ -54,9 +52,9 @@ interface SubscribeToMoreItem {
 }
 
 // Parameters
-export type DocumentParameter<TResult, TVariables> = DocumentNode | Ref<DocumentNode | null | undefined> | ReactiveFunction<DocumentNode | null | undefined> | TypedDocumentNode<TResult, TVariables> | Ref<TypedDocumentNode<TResult, TVariables> | null | undefined> | ReactiveFunction<TypedDocumentNode<TResult, TVariables> | null | undefined>
-export type VariablesParameter<TVariables> = TVariables | Ref<TVariables> | ReactiveFunction<TVariables>
-export type OptionsParameter<TResult, TVariables extends OperationVariables> = UseQueryOptions<TResult, TVariables> | Ref<UseQueryOptions<TResult, TVariables>> | ReactiveFunction<UseQueryOptions<TResult, TVariables>>
+export type DocumentParameter<TResult, TVariables> = DocumentNode | TypedDocumentNode<TResult, TVariables> | null | undefined
+export type VariablesParameter<TVariables> = TVariables
+export type OptionsParameter<TResult, TVariables extends OperationVariables> = UseQueryOptions<TResult, TVariables>
 
 export interface OnResultContext {
   client: ApolloClient<any>
@@ -78,12 +76,12 @@ export interface UseQueryReturn<TResult, TVariables extends OperationVariables>
   forceDisabled: Ref<boolean>
   document: Ref<DocumentNode | null | undefined>
   variables: Ref<TVariables | undefined>
-  options: UseQueryOptions<TResult, TVariables> | Ref<UseQueryOptions<TResult, TVariables>>
+  options: Ref<UseQueryOptions<TResult, TVariables>>
   query: Ref<ObservableQuery<TResult, TVariables> | null | undefined>
   refetch: (variables?: TVariables) => Promise<ApolloQueryResult<TResult>> | undefined
   fetchMore: (options: FetchMoreQueryOptions<TVariables, TResult> & FetchMoreOptions<TResult, TVariables>) => Promise<ApolloQueryResult<TResult>> | undefined
   updateQuery: (mapFn: (previousQueryResult: TResult, options: Pick<WatchQueryOptions<TVariables, TResult>, 'variables'>) => TResult) => void
-  subscribeToMore: <TSubscriptionVariables = OperationVariables, TSubscriptionData = TResult>(options: SubscribeToMoreOptions<TResult, TSubscriptionVariables, TSubscriptionData> | Ref<SubscribeToMoreOptions<TResult, TSubscriptionVariables, TSubscriptionData>> | ReactiveFunction<SubscribeToMoreOptions<TResult, TSubscriptionVariables, TSubscriptionData>>) => void
+  subscribeToMore: <TSubscriptionVariables = OperationVariables, TSubscriptionData = TResult>(options: MaybeRefOrGetter<SubscribeToMoreOptions<TResult, TSubscriptionVariables, TSubscriptionData>>) => void
   onResult: (fn: (param: ApolloQueryResult<TResult>, context: OnResultContext) => void) => {
     off: () => void
   }
@@ -96,49 +94,49 @@ export interface UseQueryReturn<TResult, TVariables extends OperationVariables>
  * Use a query that does not require variables or options.
  * */
 export function useQuery<TResult = any> (
-  document: DocumentParameter<TResult, undefined>
+  document: MaybeRefOrGetter<DocumentParameter<TResult, undefined>>
 ): UseQueryReturn<TResult, Record<string, never>>
 
 /**
  * Use a query that has optional variables but not options
  */
 export function useQuery<TResult = any, TVariables extends OperationVariables = OperationVariables> (
-  document: DocumentParameter<TResult, TVariables>
+  document: MaybeRefOrGetter<DocumentParameter<TResult, TVariables>>
 ): UseQueryReturn<TResult, TVariables>
 
 /**
  * Use a query that has required variables but not options
  */
 export function useQuery<TResult = any, TVariables extends OperationVariables = OperationVariables> (
-  document: DocumentParameter<TResult, TVariables>,
-  variables: VariablesParameter<TVariables>
+  document: MaybeRefOrGetter<DocumentParameter<TResult, TVariables>>,
+  variables: MaybeRefOrGetter<VariablesParameter<TVariables>>
 ): UseQueryReturn<TResult, TVariables>
 
 /**
  * Use a query that requires options but not variables.
  */
 export function useQuery<TResult = any> (
-  document: DocumentParameter<TResult, undefined>,
+  document: MaybeRefOrGetter<DocumentParameter<TResult, undefined>>,
   variables: undefined | null,
-  options: OptionsParameter<TResult, Record<string, never>>,
+  options: MaybeRefOrGetter<OptionsParameter<TResult, Record<string, never>>>,
 ): UseQueryReturn<TResult, Record<string, never>>
 
 /**
  * Use a query that requires variables and options.
  */
 export function useQuery<TResult = any, TVariables extends OperationVariables = OperationVariables> (
-  document: DocumentParameter<TResult, TVariables>,
-  variables: VariablesParameter<TVariables>,
-  options: OptionsParameter<TResult, TVariables>,
+  document: MaybeRefOrGetter<DocumentParameter<TResult, TVariables>>,
+  variables: MaybeRefOrGetter<VariablesParameter<TVariables>>,
+  options: MaybeRefOrGetter<OptionsParameter<TResult, TVariables>>,
 ): UseQueryReturn<TResult, TVariables>
 
 export function useQuery<
   TResult,
   TVariables extends OperationVariables
 > (
-  document: DocumentParameter<TResult, TVariables>,
-  variables?: VariablesParameter<TVariables>,
-  options?: OptionsParameter<TResult, TVariables>,
+  document: MaybeRefOrGetter<DocumentParameter<TResult, TVariables>>,
+  variables?: MaybeRefOrGetter<VariablesParameter<TVariables>>,
+  options?: MaybeRefOrGetter<OptionsParameter<TResult, TVariables>>,
 ): UseQueryReturn<TResult, TVariables> {
   return useQueryImpl<TResult, TVariables>(document, variables, options)
 }
@@ -147,19 +145,19 @@ export function useQueryImpl<
   TResult,
   TVariables extends OperationVariables
 > (
-  document: DocumentParameter<TResult, TVariables>,
-  variables?: VariablesParameter<TVariables>,
-  options: OptionsParameter<TResult, TVariables> = {},
+  document: MaybeRefOrGetter<DocumentParameter<TResult, TVariables>>,
+  variables?: MaybeRefOrGetter<VariablesParameter<TVariables>>,
+  options: MaybeRefOrGetter<OptionsParameter<TResult, TVariables>> = {},
   lazy = false,
 ): UseQueryReturn<TResult, TVariables> {
   const currentScope = getCurrentScope()
   const currentInstance = getCurrentInstance()
 
   const currentOptions = ref<UseQueryOptions<TResult, TVariables>>()
 
-  const documentRef = paramToRef(document)
-  const variablesRef = paramToRef(variables)
-  const optionsRef = paramToReactive(options)
+  const documentRef = toRef(document)
+  const variablesRef = toRef(variables) as Ref<TVariables | undefined>
+  const optionsRef = toRef(options)
 
   // Result
   /**
@@ -255,7 +253,7 @@ export function useQueryImpl<
     if (isServer) {
       applyDocument(documentRef.value)
       applyVariables(variablesRef.value)
-      applyOptions(unref(optionsRef))
+      applyOptions(optionsRef.value)
     }
 
     started = true
@@ -478,7 +476,7 @@ export function useQueryImpl<
   const isEnabled = computed(() => enabledOption.value && !forceDisabled.value && !!documentRef.value)
 
   // Applying options first (in case it disables the query)
-  watch(() => unref(optionsRef), applyOptions, {
+  watch(optionsRef, applyOptions, {
     deep: true,
     immediate: true,
   })
@@ -574,12 +572,10 @@ export function useQueryImpl<
     TSubscriptionVariables = OperationVariables,
     TSubscriptionData = TResult
   > (
-    options: SubscribeToMoreOptions<TResult, TSubscriptionVariables, TSubscriptionData> |
-    Ref<SubscribeToMoreOptions<TResult, TSubscriptionVariables, TSubscriptionData>> |
-    ReactiveFunction<SubscribeToMoreOptions<TResult, TSubscriptionVariables, TSubscriptionData>>,
+    options: MaybeRefOrGetter<SubscribeToMoreOptions<TResult, TSubscriptionVariables, TSubscriptionData>>,
   ) {
     if (isServer) return
-    const optionsRef = paramToRef(options)
+    const optionsRef = toRef(options)
     watch(optionsRef, (value, oldValue, onCleanup) => {
       const index = subscribeToMoreItems.findIndex(item => item.options === oldValue)
       if (index !== -1) {