For the following functions, the property order of the passed in object matters due to type inference:
useInfiniteQueryuseSuspenseInfiniteQueryinfiniteQueryOptionsThe correct property order is as follows:
queryFngetPreviousPageParamgetNextPageParamAll other properties are insensitive to the order as they do not depend on type inference.
Examples of incorrect code for this rule:
/* 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:
/* 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,})“This course is the best way to learn how to use React Query in real-world applications.”—Tanner LinsleyCheck it out
