chore(types): use vuejs reactivity types

.eslintignore

@@ -0,0 +1 @@
+packages/docs/src/.vitepress/cache

.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
     '@vue/typescript/recommended',
   ],
   parserOptions: {
-    ecmaVersion: 2020,
+    ecmaVersion: 2022,
   },
   globals: {
     name: 'off',
@@ -46,6 +46,9 @@ module.exports = {
     '@typescript-eslint/no-empty-function': 'warn',
     'no-return-assign': 'off',
     'multiline-ternary': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'no-undef': 'off',
+    'vue/multi-word-component-names': 'off',
   },
   overrides: [
     {

.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": "[email protected]",
   "pnpm": {

packages/test-e2e-ssr/tests/e2e/specs/test.cy.ts

@@ -4,7 +4,7 @@ describe('Vue 3 + Apollo Composable', () => {
   })
 
   it('loads channels', () => {
-    cy.intercept('http://localhost:4042/graphql', (req) => {
+    cy.intercept('http://localhost:4042/graphql', () => {
       throw new Error('Should not be called')
     })
     cy.visit('/')
@@ -17,7 +17,7 @@ describe('Vue 3 + Apollo Composable', () => {
 
   it('load one channel', () => {
     let shouldCallGraphQL = false
-    cy.intercept('http://localhost:4042/graphql', (req) => {
+    cy.intercept('http://localhost:4042/graphql', () => {
       if (!shouldCallGraphQL) {
         throw new Error('Should not be called')
       }

packages/test-e2e/apollo-server/connectors/channels.js

@@ -4,10 +4,10 @@ const channels = [
   { id: 'help', name: 'Ask for or give help' },
 ]
 
-exports.getAll = (context) => {
+exports.getAll = () => {
   return channels
 }
 
-exports.getOne = (id, context) => {
+exports.getOne = (id) => {
   return channels.find(c => c.id === id)
 }

packages/test-e2e/apollo-server/connectors/messages.js

@@ -24,15 +24,15 @@
   })
 }
 
-exports.getAll = (channelId, context) => {
+exports.getAll = (channelId) => {
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve(messages.filter(m => m.channelId === channelId))
     }, 100)
   })
 }
 
-exports.getOne = (id, context) => {
+exports.getOne = (id) => {
   return messages.find(m => m.id === id)
 }
 
@@ -42,8 +42,8 @@
       const message = {
         id: shortid(),
         userId: context.userId,
         channelId: channelId,
         content: content,
         dateAdded: Date.now(),
       }
       messages.push(message)
@@ -70,7 +70,7 @@
   return message
 }
 
-exports.remove = (id, context) => {
+exports.remove = (id) => {
   const index = messages.findIndex(m => m.id === id)
   if (index === -1) throw new Error('Message not found')
   const message = messages[index]

packages/test-e2e/apollo-server/connectors/users.js

@@ -14,7 +14,7 @@ function createDefaultUsers () {
 
 let users = createDefaultUsers()
 
-exports.register = (input, context) => {
+exports.register = (input) => {
   if (users.find(u => u.email === input.email)) {
     throw new Error('Email already used')
   }
@@ -34,7 +34,7 @@ exports.register = (input, context) => {
   })
 }
 
-exports.login = ({ email, password }, context) => {
+exports.login = ({ email, password }) => {
   const user = users.find(
     u => u.email === email && u.password === password,
   )
@@ -62,7 +62,7 @@ exports.logout = (context) => {
   return true
 }
 
-exports.getOne = (id, context) => {
+exports.getOne = (id) => {
   return users.find(u => u.id === id)
 }
 

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-components/src/index.js

@@ -4,7 +4,7 @@ import CApolloMutation from './ApolloMutation'
 
 const plugin = {}
 
-export function install (app, options) {
+export function install (app) {
   app.component('ApolloQuery', CApolloQuery)
   app.component('ApolloSubscribeToMore', CApolloSubscribeToMore)
   app.component('ApolloMutation', CApolloMutation)

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