Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commita2151d2

Browse files
joshuaellistravikkTkDodo
authored
feat(query-core): add context to mutationfn & mutation callbacks (#9615)
* feat(query-core): add context to mutationfnCo-Authored-By: travikk <627275+travikk@users.noreply.github.com>* fix(query-core): mutation onSuccess scope param should also be undefinedCo-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 amendsCo-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 parent0e99327 commita2151d2

File tree

50 files changed

+843
-478
lines changed

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 acontext containing data to use when for example rolling back
95+
// Optionally return aresult 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
exportclassExample {
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-
awaitqueryClient.cancelQueries({ queryKey: ['todos'] })
218+
awaitcontext.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-
// Returncontext with the optimistic todo
226+
// Returnresult 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-
awaitthis.queryClient.cancelQueries({ queryKey: ['todos'] })
93+
awaitcontext.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 acontext object with the snapshotted value
101+
// Return aresult object with the snapshotted value
102102
return {previousTodos }
103103
},
104104
// If the mutation fails,
105-
// use thecontext returned from onMutate to roll back
106-
onError: (err,newTodo,context)=> {
107-
client.setQueryData(['todos'],context.previousTodos)
105+
// use theresult 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-
awaitthis.queryClient.cancelQueries({ queryKey: ['todos',newTodo.id] })
128+
awaitcontext.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 acontext with the previous and new todo
136+
// Return aresult with the previous and new todo
137137
return {previousTodo,newTodo }
138138
},
139-
// If the mutation fails, use thecontext 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 theresult 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
Definedin: [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
Themutationoptions.
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
Mutationoptions.
112112

@@ -119,10 +119,10 @@ The mutation options.
119119
##CallSignature
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
Themutationoptions.
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
Mutationoptions.
186186

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp