Skip to content

Commit a2151d2

Browse files
joshuaellistravikkTkDodo
authored
feat(query-core): add context to mutationfn & mutation callbacks (#9615)
* feat(query-core): add context to mutationfn Co-Authored-By: travikk <627275+travikk@users.noreply.github.com> * fix(query-core): mutation onSuccess scope param should also be undefined Co-Authored-By: travikk <627275+travikk@users.noreply.github.com> * feat: add scope deprecate context on mutation state * feat(query-core): add mutation context to all mutation callbacks * chore: pr amends Co-Authored-By: Dominik Dorfmeister <1021430+TkDodo@users.noreply.github.com> * test(unit): update to handle context in mutation callbacks * chore: rename to onMutateResult * chore: revert context deprecation on MutationState --------- Co-authored-by: travikk <627275+travikk@users.noreply.github.com> Co-authored-by: Dominik Dorfmeister <1021430+TkDodo@users.noreply.github.com> Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
1 parent 0e99327 commit a2151d2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+843
-478
lines changed

‎docs/framework/angular/guides/mutations.md‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -89,20 +89,20 @@ export class TodosComponent {
8989
```ts
9090
mutation = injectMutation(() => ({
9191
mutationFn: addTodo,
92-
onMutate: (variables) => {
92+
onMutate: (variables, context) => {
9393
// A mutation is about to happen!
9494

95-
// Optionally return a context containing data to use when for example rolling back
95+
// Optionally return a result containing data to use when for example rolling back
9696
return { id: 1 }
9797
},
98-
onError: (error, variables, context) => {
98+
onError: (error, variables, onMutateResult, context) => {
9999
// An error happened!
100-
console.log(`rolling back optimistic update with id ${context.id}`)
100+
console.log(`rolling back optimistic update with id ${onMutateResult.id}`)
101101
},
102-
onSuccess: (data, variables, context) => {
102+
onSuccess: (data, variables, onMutateResult, context) => {
103103
// Boom baby!
104104
},
105-
onSettled: (data, error, variables, context) => {
105+
onSettled: (data, error, variables, onMutateResult, context) => {
106106
// Error or success... doesn't matter!
107107
},
108108
}))
@@ -129,25 +129,25 @@ mutation = injectMutation(() => ({
129129
```ts
130130
mutation = injectMutation(() => ({
131131
mutationFn: addTodo,
132-
onSuccess: (data, variables, context) => {
132+
onSuccess: (data, variables, onMutateResult, context) => {
133133
// I will fire first
134134
},
135-
onError: (error, variables, context) => {
135+
onError: (error, variables, onMutateResult, context) => {
136136
// I will fire first
137137
},
138-
onSettled: (data, error, variables, context) => {
138+
onSettled: (data, error, variables, onMutateResult, context) => {
139139
// I will fire first
140140
},
141141
}))
142142

143143
mutation.mutate(todo, {
144-
onSuccess: (data, variables, context) => {
144+
onSuccess: (data, variables, onMutateResult, context) => {
145145
// I will fire second!
146146
},
147-
onError: (error, variables, context) => {
147+
onError: (error, variables, onMutateResult, context) => {
148148
// I will fire second!
149149
},
150-
onSettled: (data, error, variables, context) => {
150+
onSettled: (data, error, variables, onMutateResult, context) => {
151151
// I will fire second!
152152
},
153153
})
@@ -160,15 +160,15 @@ mutation.mutate(todo, {
160160
export class Example {
161161
mutation = injectMutation(() => ({
162162
mutationFn: addTodo,
163-
onSuccess: (data, variables, context) => {
163+
onSuccess: (data, variables, onMutateResult, context) => {
164164
// Will be called 3 times
165165
},
166166
}))
167167

168168
doMutations() {
169169
;['Todo 1', 'Todo 2', 'Todo 3'].forEach((todo) => {
170170
this.mutation.mutate(todo, {
171-
onSuccess: (data, variables, context) => {
171+
onSuccess: (data, variables, onMutateResult, context) => {
172172
// Will execute only once, for the last mutation (Todo 3),
173173
// regardless which mutation resolves first
174174
},
@@ -213,31 +213,31 @@ const queryClient = new QueryClient()
213213
// Define the "addTodo" mutation
214214
queryClient.setMutationDefaults(['addTodo'], {
215215
mutationFn: addTodo,
216-
onMutate: async (variables) => {
216+
onMutate: async (variables, context) => {
217217
// Cancel current queries for the todos list
218-
await queryClient.cancelQueries({ queryKey: ['todos'] })
218+
await context.client.cancelQueries({ queryKey: ['todos'] })
219219

220220
// Create optimistic todo
221221
const optimisticTodo = { id: uuid(), title: variables.title }
222222

223223
// Add optimistic todo to todos list
224-
queryClient.setQueryData(['todos'], (old) => [...old, optimisticTodo])
224+
context.client.setQueryData(['todos'], (old) => [...old, optimisticTodo])
225225

226-
// Return context with the optimistic todo
226+
// Return result with the optimistic todo
227227
return { optimisticTodo }
228228
},
229-
onSuccess: (result, variables, context) => {
229+
onSuccess: (result, variables, onMutateResult, context) => {
230230
// Replace optimistic todo in the todos list with the result
231-
queryClient.setQueryData(['todos'], (old) =>
231+
context.client.setQueryData(['todos'], (old) =>
232232
old.map((todo) =>
233-
todo.id === context.optimisticTodo.id ? result : todo,
233+
todo.id === onMutateResult.optimisticTodo.id ? result : todo,
234234
),
235235
)
236236
},
237-
onError: (error, variables, context) => {
237+
onError: (error, variables, onMutateResult, context) => {
238238
// Remove optimistic todo from the todos list
239-
queryClient.setQueryData(['todos'], (old) =>
240-
old.filter((todo) => todo.id !== context.optimisticTodo.id),
239+
context.client.setQueryData(['todos'], (old) =>
240+
old.filter((todo) => todo.id !== onMutateResult.optimisticTodo.id),
241241
)
242242
},
243243
retry: 3,

‎docs/framework/angular/guides/optimistic-updates.md‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -87,28 +87,28 @@ queryClient = inject(QueryClient)
8787
updateTodo = injectMutation(() => ({
8888
mutationFn: updateTodo,
8989
// When mutate is called:
90-
onMutate: async (newTodo) => {
90+
onMutate: async (newTodo, context) => {
9191
// Cancel any outgoing refetches
9292
// (so they don't overwrite our optimistic update)
93-
await this.queryClient.cancelQueries({ queryKey: ['todos'] })
93+
await context.client.cancelQueries({ queryKey: ['todos'] })
9494

9595
// Snapshot the previous value
96-
const previousTodos = client.getQueryData(['todos'])
96+
const previousTodos = context.client.getQueryData(['todos'])
9797

9898
// Optimistically update to the new value
99-
this.queryClient.setQueryData(['todos'], (old) => [...old, newTodo])
99+
context.client.setQueryData(['todos'], (old) => [...old, newTodo])
100100

101-
// Return a context object with the snapshotted value
101+
// Return a result object with the snapshotted value
102102
return { previousTodos }
103103
},
104104
// If the mutation fails,
105-
// use the context returned from onMutate to roll back
106-
onError: (err, newTodo, context) => {
107-
client.setQueryData(['todos'], context.previousTodos)
105+
// use the result returned from onMutate to roll back
106+
onError: (err, newTodo, onMutateResult, context) => {
107+
context.client.setQueryData(['todos'], onMutateResult.previousTodos)
108108
},
109109
// Always refetch after error or success:
110-
onSettled: () => {
111-
this.queryClient.invalidateQueries({ queryKey: ['todos'] })
110+
onSettled: (data, error, variables, onMutateResult, context) => {
111+
context.client.invalidateQueries({ queryKey: ['todos'] })
112112
},
113113
}))
114114
```
@@ -122,30 +122,30 @@ queryClient = inject(QueryClient)
122122
updateTodo = injectMutation(() => ({
123123
mutationFn: updateTodo,
124124
// When mutate is called:
125-
onMutate: async (newTodo) => {
125+
onMutate: async (newTodo, context) => {
126126
// Cancel any outgoing refetches
127127
// (so they don't overwrite our optimistic update)
128-
await this.queryClient.cancelQueries({ queryKey: ['todos', newTodo.id] })
128+
await context.client.cancelQueries({ queryKey: ['todos', newTodo.id] })
129129

130130
// Snapshot the previous value
131-
const previousTodo = this.queryClient.getQueryData(['todos', newTodo.id])
131+
const previousTodo = context.client.getQueryData(['todos', newTodo.id])
132132

133133
// Optimistically update to the new value
134-
this.queryClient.setQueryData(['todos', newTodo.id], newTodo)
134+
context.client.setQueryData(['todos', newTodo.id], newTodo)
135135

136-
// Return a context with the previous and new todo
136+
// Return a result with the previous and new todo
137137
return { previousTodo, newTodo }
138138
},
139-
// If the mutation fails, use the context we returned above
140-
onError: (err, newTodo, context) => {
141-
this.queryClient.setQueryData(
142-
['todos', context.newTodo.id],
143-
context.previousTodo,
139+
// If the mutation fails, use the result we returned above
140+
onError: (err, newTodo, onMutateResult, context) => {
141+
context.client.setQueryData(
142+
['todos', onMutateResult.newTodo.id],
143+
onMutateResult.previousTodo,
144144
)
145145
},
146146
// Always refetch after error or success:
147-
onSettled: (newTodo) => {
148-
this.queryClient.invalidateQueries({ queryKey: ['todos', newTodo.id] })
147+
onSettled: (newTodo, error, variables, onMutateResult, context) => {
148+
context.client.invalidateQueries({ queryKey: ['todos', newTodo.id] })
149149
},
150150
}))
151151
```
@@ -157,7 +157,7 @@ updateTodo = injectMutation(() => ({
157157
injectMutation({
158158
mutationFn: updateTodo,
159159
// ...
160-
onSettled: (newTodo, error, variables, context) => {
160+
onSettled: (newTodo, error, variables, onMutateResult, context) => {
161161
if (error) {
162162
// do something
163163
}

‎docs/framework/angular/reference/functions/injectmutation.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ title: injectMutation
88
# Function: injectMutation()
99

1010
```ts
11-
function injectMutation<TData, TError, TVariables, TContext>(
11+
function injectMutation<TData, TError, TVariables, TOnMutateResult>(
1212
injectMutationFn,
1313
options?,
14-
): CreateMutationResult<TData, TError, TVariables, TContext>
14+
): CreateMutationResult<TData, TError, TVariables, TOnMutateResult>
1515
```
1616

1717
Defined in: [inject-mutation.ts:44](https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/inject-mutation.ts#L44)
@@ -28,13 +28,13 @@ Unlike queries, mutations are not run automatically.
2828

2929
• **TVariables** = `void`
3030

31-
• **TContext** = `unknown`
31+
• **TOnMutateResult** = `unknown`
3232

3333
## Parameters
3434

3535
### injectMutationFn
3636

37-
() => [`CreateMutationOptions`](../../interfaces/createmutationoptions.md)\<`TData`, `TError`, `TVariables`, `TContext`\>
37+
() => [`CreateMutationOptions`](../../interfaces/createmutationoptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
3838

3939
A function that returns mutation options.
4040

@@ -46,6 +46,6 @@ Additional configuration
4646

4747
## Returns
4848

49-
[`CreateMutationResult`](../../type-aliases/createmutationresult.md)\<`TData`, `TError`, `TVariables`, `TContext`\>
49+
[`CreateMutationResult`](../../type-aliases/createmutationresult.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
5050

5151
The mutation.

‎docs/framework/angular/reference/functions/mutationoptions.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@ The mutation options.
4545
## Call Signature
4646

4747
```ts
48-
function mutationOptions<TData, TError, TVariables, TContext>(
48+
function mutationOptions<TData, TError, TVariables, TOnMutateResult>(
4949
options,
5050
): WithRequired<
51-
CreateMutationOptions<TData, TError, TVariables, TContext>,
51+
CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>,
5252
'mutationKey'
5353
>
5454
```
@@ -94,19 +94,19 @@ class ComponentOrService {
9494

9595
• **TVariables** = `void`
9696

97-
• **TContext** = `unknown`
97+
• **TOnMutateResult** = `unknown`
9898

9999
### Parameters
100100

101101
#### options
102102

103-
`WithRequired`\<[`CreateMutationOptions`](../../interfaces/createmutationoptions.md)\<`TData`, `TError`, `TVariables`, `TContext`\>, `"mutationKey"`\>
103+
`WithRequired`\<[`CreateMutationOptions`](../../interfaces/createmutationoptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
104104

105105
The mutation options.
106106

107107
### Returns
108108

109-
`WithRequired`\<[`CreateMutationOptions`](../../interfaces/createmutationoptions.md)\<`TData`, `TError`, `TVariables`, `TContext`\>, `"mutationKey"`\>
109+
`WithRequired`\<[`CreateMutationOptions`](../../interfaces/createmutationoptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
110110

111111
Mutation options.
112112

@@ -119,10 +119,10 @@ The mutation options.
119119
## Call Signature
120120

121121
```ts
122-
function mutationOptions<TData, TError, TVariables, TContext>(
122+
function mutationOptions<TData, TError, TVariables, TOnMutateResult>(
123123
options,
124124
): Omit<
125-
CreateMutationOptions<TData, TError, TVariables, TContext>,
125+
CreateMutationOptions<TData, TError, TVariables, TOnMutateResult>,
126126
'mutationKey'
127127
>
128128
```
@@ -168,19 +168,19 @@ class ComponentOrService {
168168

169169
• **TVariables** = `void`
170170

171-
• **TContext** = `unknown`
171+
• **TOnMutateResult** = `unknown`
172172

173173
### Parameters
174174

175175
#### options
176176

177-
`Omit`\<[`CreateMutationOptions`](../../interfaces/createmutationoptions.md)\<`TData`, `TError`, `TVariables`, `TContext`\>, `"mutationKey"`\>
177+
`Omit`\<[`CreateMutationOptions`](../../interfaces/createmutationoptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
178178

179179
The mutation options.
180180

181181
### Returns
182182

183-
`Omit`\<[`CreateMutationOptions`](../../interfaces/createmutationoptions.md)\<`TData`, `TError`, `TVariables`, `TContext`\>, `"mutationKey"`\>
183+
`Omit`\<[`CreateMutationOptions`](../../interfaces/createmutationoptions.md)\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>, `"mutationKey"`\>
184184

185185
Mutation options.
186186

0 commit comments

Comments
 (0)