On this page
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, }) /* 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, }) /* 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
- ✅ Recommended
- 🔧 Fixable
