64 lines
1.7 KiB
Markdown
64 lines
1.7 KiB
Markdown
---
|
|
id: infinite-query-property-order
|
|
title: Ensure correct order of inference sensitive properties for infinite queries
|
|
---
|
|
|
|
For the following functions, the property order of the passed in object matters due to type inference:
|
|
|
|
- `useInfiniteQuery`
|
|
- `useSuspenseInfiniteQuery`
|
|
- `infiniteQueryOptions`
|
|
|
|
The correct property order is as follows:
|
|
|
|
- `queryFn`
|
|
- `getPreviousPageParam`
|
|
- `getNextPageParam`
|
|
|
|
All other properties are insensitive to the order as they do not depend on type inference.
|
|
|
|
## Rule Details
|
|
|
|
Examples of **incorrect** code for this rule:
|
|
|
|
```tsx
|
|
/* eslint "@tanstack/query/infinite-query-property-order": "warn" */
|
|
import { useInfiniteQuery } from '@tanstack/react-query'
|
|
|
|
const query = useInfiniteQuery({
|
|
queryKey: ['projects'],
|
|
getNextPageParam: (lastPage) => lastPage.nextId ?? undefined,
|
|
queryFn: async ({ pageParam }) => {
|
|
const response = await fetch(`/api/projects?cursor=${pageParam}`)
|
|
return await response.json()
|
|
},
|
|
initialPageParam: 0,
|
|
getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined,
|
|
maxPages: 3,
|
|
})
|
|
```
|
|
|
|
Examples of **correct** code for this rule:
|
|
|
|
```tsx
|
|
/* eslint "@tanstack/query/infinite-query-property-order": "warn" */
|
|
import { useInfiniteQuery } from '@tanstack/react-query'
|
|
|
|
const query = useInfiniteQuery({
|
|
queryKey: ['projects'],
|
|
queryFn: async ({ pageParam }) => {
|
|
const response = await fetch(`/api/projects?cursor=${pageParam}`)
|
|
return await response.json()
|
|
},
|
|
initialPageParam: 0,
|
|
getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined,
|
|
getNextPageParam: (lastPage) => lastPage.nextId ?? undefined,
|
|
maxPages: 3,
|
|
})
|
|
```
|
|
|
|
## Attributes
|
|
|
|
- [x] ✅ Recommended
|
|
- [x] 🔧 Fixable
|