Merge pull request #8 from guendev/fix-missing-context

feat(core): add HookContext to event hooks

Author: guendev

.changeset/chubby-mice-repair.md

@@ -0,0 +1,6 @@
+---
+"@vue3-apollo/core": minor
+"@vue3-apollo/nuxt": minor
+---
+
+feat(core): add `HookContext` to event hooks

.changeset/pretty-spoons-move.md

@@ -0,0 +1,5 @@
+---
+"@vue3-apollo/docs": minor
+---
+
+docs: update migration guide

.github/workflows/ci.yml

@@ -6,9 +6,9 @@ on:
       - main
     paths:
       - 'packages/**'
-      - 'package.json'
-      - 'pnpm-lock.yaml'
-      - '.github/workflows/ci.yml'
+      - package.json
+      - pnpm-lock.yaml
+      - .github/workflows/ci.yml
   pull_request:
     branches:
       - main
@@ -31,7 +31,7 @@ jobs:
         uses: actions/setup-node@v5
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: pnpm
 
       - name: Install dependencies
         run: pnpm install
@@ -53,7 +53,7 @@ jobs:
         uses: actions/setup-node@v5
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: pnpm
 
       - name: Install dependencies
         run: pnpm install
@@ -74,7 +74,7 @@ jobs:
         uses: actions/setup-node@v5
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: pnpm
 
       - name: Install dependencies
         run: pnpm install

.github/workflows/deploy-docs.yml

@@ -7,7 +7,7 @@ on:
     paths:
       - 'packages/docs/**'
       - 'packages/core/**'
-      - '.github/workflows/deploy-docs.yml'
+      - .github/workflows/deploy-docs.yml
   workflow_dispatch:
 
 concurrency:
@@ -33,7 +33,7 @@ jobs:
         uses: actions/setup-node@v5
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: pnpm
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/release.yml

@@ -6,9 +6,9 @@ on:
       - main
     paths:
       - 'packages/**'
-      - 'package.json'
-      - 'pnpm-lock.yaml'
-      - 'pnpm-workspace.yaml'
+      - package.json
+      - pnpm-lock.yaml
+      - pnpm-workspace.yaml
       - '.changeset/**'
 
 concurrency:
@@ -36,7 +36,7 @@ jobs:
         uses: actions/setup-node@v5
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: pnpm
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install dependencies

eslint.config.mjs

@@ -5,7 +5,8 @@ export default antfu(
         ignores: [
             'src/**/*.generated.*',
             '.nuxt',
-            '.junie/*'
+            '.junie/*',
+            '**/*/*.md'
         ],
         stylistic: {
             overrides: {

package.json

@@ -2,6 +2,7 @@
   "name": "root",
   "type": "module",
   "version": "1.0.0",
+  "packageManager": "[email protected]",
   "scripts": {
     "build": "pnpm run build:core && pnpm run build:nuxt && pnpm run build:docs",
     "build:core": "pnpm --filter @vue3-apollo/core run build",
@@ -30,6 +31,5 @@
     "eslint-plugin-perfectionist": "^4.15.1",
     "typescript": "^5.9.3",
     "unbuild": "^3.6.1"
-  },
-  "packageManager": "[email protected]"
-}
+  }
+}

packages/core/README.md

@@ -26,31 +26,32 @@ npm install @vue3-apollo/core @apollo/client graphql
 ### 1. Create an Apollo Client
 
 ```ts
-import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core'
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client/core'
 
 export const defaultClient = new ApolloClient({
-  cache: new InMemoryCache(),
-  link: new HttpLink({
+    cache: new InMemoryCache(),
+    link: new HttpLink({
     // Example public GraphQL API
-    uri: 'https://graphqlplaceholder.vercel.app/graphql',
-  }),
+        uri: 'https://graphqlplaceholder.vercel.app/graphql',
+    }),
 })
 ```
 
 ### 2. Register the Plugin
 
 ```ts
-import { createApp } from 'vue'
 import { apolloPlugin } from '@vue3-apollo/core'
-import { defaultClient, analyticsClient } from './apollo-clients'
+import { createApp } from 'vue'
+
+import { analyticsClient, defaultClient } from './apollo-clients'
 
 const app = createApp(App)
 
 app.use(apolloPlugin, {
-  clients: {
-    default: defaultClient,
-    analytics: analyticsClient,
-  },
+    clients: {
+        analytics: analyticsClient,
+        default: defaultClient,
+    },
 })
 ```
 
@@ -73,12 +74,16 @@ const GET_POSTS = gql`
   }
 `
 
-const { result, loading, error } = useQuery(GET_POSTS)
+const { error, loading, result } = useQuery(GET_POSTS)
 </script>
 
 <template>
-  <div v-if="loading">Loading...</div>
-  <div v-else-if="error">{{ error.message }}</div>
+  <div v-if="loading">
+    Loading...
+  </div>
+  <div v-else-if="error">
+    {{ error.message }}
+  </div>
   <ul v-else>
     <li v-for="post in result.posts" :key="post.id">
       <strong>{{ post.title }}</strong> — {{ post.body }}
@@ -108,7 +113,7 @@ You can register and switch between multiple clients:
 
 ```ts
 const { result: analyticsData } = useQuery(ANALYTICS_QUERY, null, {
-  clientId: 'analytics',
+    clientId: 'analytics',
 })
 ```
 
@@ -117,7 +122,7 @@ const { result: analyticsData } = useQuery(ANALYTICS_QUERY, null, {
 All composables are fully typed, providing autocompletion and inference for query variables and responses.
 
 ```ts
-const { result } = useQuery<{ posts: { id: string; title: string }[] }>(GET_POSTS)
+const { result } = useQuery<{ posts: { id: string, title: string }[] }>(GET_POSTS)
 ```
 
 ## 🧑‍💻 Contributing
@@ -141,4 +146,4 @@ pnpm dev:docs
 - 🌐 [Documentation](https://vue3-apollo.guen.dev/)
 - 💾 [GitHub Repository](https://github.com/guendev/vue3-apollo)
 - 📦 [npm - @vue3-apollo/core](https://www.npmjs.com/package/@vue3-apollo/core)
-- 🧱 [Nuxt Integration - @vue3-apollo/nuxt](https://www.npmjs.com/package/@vue3-apollo/nuxt)
+- 🧱 [Nuxt Integration - @vue3-apollo/nuxt](https://www.npmjs.com/package/@vue3-apollo/nuxt)

packages/core/package.json

@@ -1,17 +1,11 @@
 {
   "name": "@vue3-apollo/core",
+  "type": "module",
   "version": "1.1.0",
+  "packageManager": "[email protected]",
   "description": "Composable Apollo Client utilities for Vue 3.",
-  "keywords": [
-    "vue",
-    "vue3",
-    "apollo",
-    "graphql",
-    "composables",
-    "client"
-  ],
-  "license": "MIT",
   "author": "Guen <[email protected]>",
+  "license": "MIT",
   "homepage": "https://github.com/guendev/vue3-apollo#readme",
   "repository": {
     "type": "git",
@@ -20,10 +14,15 @@
   "bugs": {
     "url": "https://github.com/guendev/vue3-apollo/issues"
   },
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "keywords": [
+    "vue",
+    "vue3",
+    "apollo",
+    "graphql",
+    "composables",
+    "client"
+  ],
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -33,6 +32,9 @@
     },
     "./package.json": "./package.json"
   },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
       "*": [
@@ -42,10 +44,12 @@
     }
   },
   "files": [
-    "dist",
-    "README.md"
+    "README.md",
+    "dist"
   ],
-  "sideEffects": false,
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "scripts": {
     "dev": "tsup --config tsup.config.ts --watch",
     "build": "tsup --config tsup.config.ts",
@@ -67,13 +71,9 @@
     "tsup": "^8.5.0",
     "typescript": "^5.9.3"
   },
-  "packageManager": "[email protected]",
-  "engines": {
-    "node": ">=18.0.0"
-  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/",
     "provenance": true
   }
-}
+}

packages/core/src/composables/useMutation.ts

@@ -4,7 +4,7 @@ import type { DocumentNode } from 'graphql'
 import { createEventHook } from '@vueuse/core'
 import { nextTick, ref, shallowRef } from 'vue'
 
-import type { UseBaseOption } from '../utils/type'
+import type { HookContext, UseBaseOption } from '../utils/type'
 
 import { useApolloTracking } from '../helpers/useApolloTracking'
 import { isDefined } from '../utils/isDefined'
@@ -91,8 +91,8 @@ export function useMutation<
     const error = ref<ErrorLike>()
     const called = ref(false)
 
-    const onDone = createEventHook<TData>()
-    const onError = createEventHook<ErrorLike>()
+    const onDone = createEventHook<[TData, HookContext]>()
+    const onError = createEventHook<[ErrorLike, HookContext]>()
 
     useApolloTracking({
         state: loading,
@@ -119,14 +119,12 @@ export function useMutation<
 
             if (isDefined(result.data)) {
                 await nextTick()
-                // eslint-disable-next-line ts/ban-ts-comment
-                // @ts-expect-error
-                void onDone.trigger(result.data)
+                void onDone.trigger(result.data, { client })
             }
 
             if (result.error) {
                 error.value = result.error
-                void onError.trigger(result.error)
+                void onError.trigger(result.error, { client })
             }
 
             return result
@@ -136,7 +134,7 @@ export function useMutation<
             error.value = mutationErrorValue
 
             await nextTick()
-            void onError.trigger(mutationErrorValue)
+            void onError.trigger(mutationErrorValue, { client })
             if (options?.throws === 'always') {
                 throw e
             }
@@ -205,9 +203,11 @@ export function useMutation<
          *
          * @example
          * ```ts
-         * onDone((data) => {
+         * onDone((data, context) => {
          *   toast.success('User created!')
          *   router.push(`/users/${data.createUser.id}`)
+         *   // Access Apollo client for manual cache updates
+         *   context.client.cache.evict({ fieldName: 'users' })
          * })
          * ```
          */
@@ -219,9 +219,11 @@ export function useMutation<
          *
          * @example
          * ```ts
-         * onError((error) => {
+         * onError((error, context) => {
          *   toast.error(error.message)
          *   console.error('Mutation failed:', error)
+         *   // Access Apollo client for error handling
+         *   context.client.clearStore()
          * })
          * ```
          */