Skip to content

Commit afce31b

Browse files
committed
docs: update migration guide with section renumbering and API changes
- Renumber `useAsyncQuery` subsections for clarity. - Document changes to `useApolloClient`, including removal of `resolveClient`. - Update `useMutation onDone` callback with new `TData` handling. - Revise summary table with newly added API differences and notes.
1 parent 9f8bb24 commit afce31b

File tree

1 file changed

+77
-11
lines changed

1 file changed

+77
-11
lines changed

packages/docs/migration.md

Lines changed: 77 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ You can pass an optional **`id`** parameter to share loading states across compo
6363

6464
The new `useAsyncQuery` for Nuxt is close to the old one but there are some **notable differences** you should adjust for:
6565

66-
### 1) Positional overloads removed → object options only
66+
### 3.1) Positional overloads removed → object options only
6767
**Before (positional):**
6868
```ts
6969
useAsyncQuery(query, variables?, clientId?, context?, options?)
@@ -79,7 +79,7 @@ useAsyncQuery({
7979
```
8080
> This simplifies typing and aligns with Apollo `QueryOptions`.
8181
82-
### 2) `useLazyAsyncQuery` removed
82+
### 3.2) `useLazyAsyncQuery` removed
8383
Use `useAsyncQuery` with Nuxt `AsyncData` options instead of the dedicated "lazy" variant.
8484
8585
**Before:**
@@ -102,7 +102,7 @@ useAsyncQuery(
102102
)
103103
```
104104
105-
### 3) `cache` option removed
105+
### 3.3) `cache` option removed
106106
The old `cache?: boolean` flag is replaced by **Apollo fetch policies**.
107107
108108
**Before:**
@@ -122,15 +122,81 @@ useAsyncQuery({
122122
})
123123
```
124124
125+
### 3.4) `useApolloClient` changes
126+
127+
The old helper returned an object with `resolveClient` and `client`. The new helper is a **function** that returns the Apollo client instance directly.
128+
129+
**Before:**
130+
```ts
131+
// Old package
132+
const { resolveClient, client } = useApolloClient()
133+
134+
// default client
135+
await client.query({ query: GET_USERS })
136+
137+
// named client
138+
const analytics = resolveClient('analytics')
139+
await analytics.query({ query: GET_DASHBOARD })
140+
```
141+
142+
**After:**
143+
```ts
144+
// @vue3-apollo/core
145+
import { useApolloClient } from '@vue3-apollo/core'
146+
147+
// default (first available)
148+
const client = useApolloClient()
149+
await client.query({ query: GET_USERS })
150+
151+
// named client
152+
const analyticsClient = useApolloClient('analytics')
153+
await analyticsClient.query({ query: GET_DASHBOARD })
154+
```
155+
156+
**Notes**
157+
- No `resolveClient` function, no `.client` property.
158+
- If **no clients are registered**, an error is thrown.
159+
- If the **requested id is missing**, an error is thrown with the list of available clients.
160+
- Register clients via `apolloPlugin` and include a `default` client.
161+
162+
### 3.5) `useMutation onDone` changes
163+
164+
In the old API, `onDone` received a `MutateResult` object wrapping the mutation data, whereas in the new API it directly provides the **typed mutation data (TData)**.
165+
166+
**Before:**
167+
```ts
168+
onDone((result, { client }) => {
169+
// result.data contains mutation result
170+
console.log(result.data?.createUser.id)
171+
// access Apollo client through context
172+
client.cache.modify({ ... })
173+
})
174+
```
175+
176+
**After:**
177+
```ts
178+
onDone((data, context) => {
179+
// data is the mutation result directly
180+
console.log(data.createUser.id)
181+
// access Apollo client through context
182+
context.client.cache.modify({ ... })
183+
})
184+
```
185+
186+
**Key Differences:**
187+
- Old: `result` was of type `MutateResult<TData>` → contained `{ data, error, extensions }`.
188+
- New: first argument is `TData`, not wrapped inside `data`.
189+
- Second argument `context` still includes `{ client }`.
190+
125191
## 4. Summary
126-
| Feature | Old | New | Notes |
127-
|----------|-----|-----|-------|
128-
| Async Query (SSR) | `useAsyncQuery` from old package | `useAsyncQuery` (object options) | Unified API for Nuxt 4 |
129-
| Lazy Async Query | `useLazyAsyncQuery` | Removed → use `useAsyncQuery` with `{ lazy: true }` | Simplified lazy fetching |
130-
| Query / Mutation / Subscription | `@vue/apollo-composable` | `@vue3-apollo/core` | Same API |
131-
| Global Loading Tracking | ✅ | ✅ | via `useApolloTracker` |
132-
| Component-scoped Loading | ❌ | ✅ | pass `id` to track across scopes |
133-
| Apollo v4 Support | Manual | ✅ | Native |
192+
| Feature | Old | New | Notes |
193+
|---------------------------------|----------------------------------|-----------------------------------------------------|--------------------------------------------------------------|
194+
| Async Query (SSR) | `useAsyncQuery` from old package | `useAsyncQuery` (object options) | Unified API for Nuxt 4 |
195+
| Lazy Async Query | `useLazyAsyncQuery` | Removed → use `useAsyncQuery` with `{ lazy: true }` | Simplified lazy fetching |
196+
| Query / Mutation / Subscription | `@vue/apollo-composable` | `@vue3-apollo/core` | Same core API, except for `useMutation`'s `onDone` callback. |
197+
| Global Loading Tracking | ✅ | ✅ | via `useApolloTracker` |
198+
| Component-scoped Loading | ❌ | ✅ | pass `id` to track across scopes |
199+
| Apollo v4 Support | Manual | ✅ | Native |
134200
135201
## 5. Example Migration
136202

0 commit comments

Comments
 (0)