Skip to content

Commit 593eacb

Browse files
docs: add docs for mutation-property-order eslint rule (#9271)
1 parent 571bc18 commit 593eacb

File tree

2 files changed

+74
-0
lines changed

2 files changed

+74
-0
lines changed

docs/eslint/eslint-plugin-query.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,4 @@ Alternatively, add `@tanstack/query` to the plugins section, and configure the r
9999
- [@tanstack/query/no-unstable-deps](../no-unstable-deps.md)
100100
- [@tanstack/query/infinite-query-property-order](../infinite-query-property-order.md)
101101
- [@tanstack/query/no-void-query-fn](../no-void-query-fn.md)
102+
- [@tanstack/query/mutation-property-order](../mutation-property-order.md)
Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
id: mutation-property-order
3+
title: Ensure correct order of inference-sensitive properties in useMutation()
4+
---
5+
6+
For the following functions, the property order of the passed in object matters due to type inference:
7+
8+
- `useMutation()`
9+
10+
The correct property order is as follows:
11+
12+
- `onMutate`
13+
- `onError`
14+
- `onSettled`
15+
16+
All other properties are insensitive to the order as they do not depend on type inference.
17+
18+
## Rule Details
19+
20+
Examples of **incorrect** code for this rule:
21+
22+
```tsx
23+
/* eslint "@tanstack/query/mutation-property-order": "warn" */
24+
import { useMutation } from '@tanstack/react-query'
25+
26+
const mutation = useMutation({
27+
mutationFn: () => Promise.resolve('success'),
28+
onSettled: () => {
29+
results.push('onSettled-promise')
30+
return Promise.resolve('also-ignored') // Promise<string> (should be ignored)
31+
},
32+
onMutate: async () => {
33+
results.push('onMutate-async')
34+
await sleep(1)
35+
return { backup: 'async-data' }
36+
},
37+
onError: async () => {
38+
results.push('onError-async-start')
39+
await sleep(1)
40+
results.push('onError-async-end')
41+
},
42+
})
43+
```
44+
45+
Examples of **correct** code for this rule:
46+
47+
```tsx
48+
/* eslint "@tanstack/query/mutation-property-order": "warn" */
49+
import { useMutation } from '@tanstack/react-query'
50+
51+
const mutation = useMutation({
52+
mutationFn: () => Promise.resolve('success'),
53+
onMutate: async () => {
54+
results.push('onMutate-async')
55+
await sleep(1)
56+
return { backup: 'async-data' }
57+
},
58+
onError: async () => {
59+
results.push('onError-async-start')
60+
await sleep(1)
61+
results.push('onError-async-end')
62+
},
63+
onSettled: () => {
64+
results.push('onSettled-promise')
65+
return Promise.resolve('also-ignored') // Promise<string> (should be ignored)
66+
},
67+
})
68+
```
69+
70+
## Attributes
71+
72+
- [x] ✅ Recommended
73+
- [x] 🔧 Fixable

0 commit comments

Comments
 (0)