useTanstackQueryInfiniteQueryPropertyOrder (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useTanstackQueryInfiniteQueryPropertyOrder
This rule has an unsafe fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- tanstackQuery
Sources:
- Same as @tanstack/query/infinite-query-property-order

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useTanstackQueryInfiniteQueryPropertyOrder": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce a consistent property order in the options of TanStack Query infinite query functions.

TanStack Query infers the types of an infinite query from the properties of its options object, in the order in which they are written. queryFn must come first, followed by getPreviousPageParam and getNextPageParam. A different order can make the inferred types of the page parameters wrong. The other properties can be in any position.

This rule checks the options passed to the following functions, when they are imported from a TanStack Query package such as @tanstack/react-query:

useInfiniteQuery
useSuspenseInfiniteQuery
infiniteQueryOptions

The code action moves the three properties to the positions they already occupy, in the expected order, and leaves the other properties where they are. It is unsafe because it changes the order in which the property values are evaluated.

Examples

Invalid

1
import { useInfiniteQuery } from "@tanstack/react-query";
2

3
useInfiniteQuery({
4
    queryKey: ["projects"],
5
    getNextPageParam: (lastPage) => lastPage.nextId,
6
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
7
    initialPageParam: 0,
8
});

code-block.js:5:5 lint/nursery/useTanstackQueryInfiniteQueryPropertyOrder  FIXABLE  ━━━━━━━━━━━━━━━━

  ⚠ The properties of this infinite query are in the wrong order.
  
    3 │ useInfiniteQuery({
    4 │     queryKey: ["projects"],
  > 5 │     getNextPageParam: (lastPage) => lastPage.nextId,
      │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    6 │     queryFn: ({ pageParam }) => fetchProjects(pageParam),
    7 │     initialPageParam: 0,
  
  ℹ TanStack Query infers types from the order of the properties. Write queryFn, then getPreviousPageParam, then getNextPageParam.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Reorder the properties.
  
    3 3 │   useInfiniteQuery({
    4 4 │       queryKey: ["projects"],
    5   │ - ····getNextPageParam:·(lastPage)·=>·lastPage.nextId,
    6   │ - ····queryFn:·({·pageParam·})·=>·fetchProjects(pageParam),
      5 │ + ····queryFn:·({·pageParam·})·=>·fetchProjects(pageParam),
      6 │ + ····getNextPageParam:·(lastPage)·=>·lastPage.nextId,
    7 7 │       initialPageParam: 0,
    8 8 │   });

1
import { infiniteQueryOptions } from "@tanstack/react-query";
2

3
infiniteQueryOptions({
4
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
5
    getNextPageParam: (lastPage) => lastPage.nextId,
6
    getPreviousPageParam: (firstPage) => firstPage.previousId,
7
});

code-block.js:5:5 lint/nursery/useTanstackQueryInfiniteQueryPropertyOrder  FIXABLE  ━━━━━━━━━━━━━━━━

  ⚠ The properties of this infinite query are in the wrong order.
  
    3 │ infiniteQueryOptions({
    4 │     queryFn: ({ pageParam }) => fetchProjects(pageParam),
  > 5 │     getNextPageParam: (lastPage) => lastPage.nextId,
      │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    6 │     getPreviousPageParam: (firstPage) => firstPage.previousId,
    7 │ });
  
  ℹ TanStack Query infers types from the order of the properties. Write queryFn, then getPreviousPageParam, then getNextPageParam.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Reorder the properties.
  
    3 3 │   infiniteQueryOptions({
    4 4 │       queryFn: ({ pageParam }) => fetchProjects(pageParam),
    5   │ - ····getNextPageParam:·(lastPage)·=>·lastPage.nextId,
    6   │ - ····getPreviousPageParam:·(firstPage)·=>·firstPage.previousId,
      5 │ + ····getPreviousPageParam:·(firstPage)·=>·firstPage.previousId,
      6 │ + ····getNextPageParam:·(lastPage)·=>·lastPage.nextId,
    7 7 │   });
    8 8 │

Valid

1
import { useInfiniteQuery } from "@tanstack/react-query";
2

3
useInfiniteQuery({
4
    queryKey: ["projects"],
5
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
6
    initialPageParam: 0,
7
    getPreviousPageParam: (firstPage) => firstPage.previousId,
8
    getNextPageParam: (lastPage) => lastPage.nextId,
9
});