Tanstack Query Intent Compositions Enforce Query Best P 48bbbabb

Setup

import pluginQuery from '@tanstack/eslint-plugin-query'

export default [...pluginQuery.configs['flat/recommended']]

Core Integration Patterns

Use strict when generating Query-heavy code

import pluginQuery from '@tanstack/eslint-plugin-query'

export default [...pluginQuery.configs['flat/recommended-strict']]

Prefer option factories

import { queryOptions, useQuery } from '@tanstack/react-query'

const todosOptions = queryOptions({
  queryKey: ['todos'],
  queryFn: async () => [{ id: 1 }],
})

export function useTodos() {
  return useQuery(todosOptions)
}

Keep inference-sensitive property order

import { useInfiniteQuery } from '@tanstack/react-query'

export function useFeed() {
  return useInfiniteQuery({
    queryKey: ['feed'],
    queryFn: async ({ pageParam }) => ({ nextCursor: pageParam + 1 }),
    initialPageParam: 0,
    getNextPageParam: (page) => page.nextCursor,
  })
}

Common Mistakes

MEDIUM Strict rule not enabled

Wrong:

import pluginQuery from '@tanstack/eslint-plugin-query'

export default [...pluginQuery.configs['flat/recommended']]

Correct:

import pluginQuery from '@tanstack/eslint-plugin-query'

export default [...pluginQuery.configs['flat/recommended-strict']]

Strict mode catches option-factory and inference patterns that agents commonly miss.

Source: TanStack/query:docs/eslint/eslint-plugin-query.md

MEDIUM Infinite option property order

Wrong:

import { useInfiniteQuery } from '@tanstack/react-query'

export function useFeed() {
  return useInfiniteQuery({
    queryFn: async () => ({ nextCursor: 1 }),
    queryKey: ['feed'],
    getNextPageParam: (page) => page.nextCursor,
    initialPageParam: 0,
  })
}

Correct:

import { useInfiniteQuery } from '@tanstack/react-query'

export function useFeed() {
  return useInfiniteQuery({
    queryKey: ['feed'],
    queryFn: async ({ pageParam }) => ({ nextCursor: pageParam + 1 }),
    initialPageParam: 0,
    getNextPageParam: (page) => page.nextCursor,
  })
}

Some infinite-query inference depends on stable option ordering.

Source: TanStack/query:docs/eslint/infinite-query-property-order.md

MEDIUM Mutation option property order

Wrong:

import { useMutation } from '@tanstack/react-query'

export function useSave() {
  return useMutation({
    onSuccess: () => console.log('saved'),
    mutationFn: async (title: string) => title,
  })
}

Correct:

import { useMutation } from '@tanstack/react-query'

export function useSave() {
  return useMutation({
    mutationFn: async (title: string) => title,
    onSuccess: () => console.log('saved'),
  })
}

The mutation property order rule preserves inference for mutation options.

Source: TanStack/query:docs/eslint/mutation-property-order.md

See also: core/design-query-keys-and-options for the patterns these rules protect.