Framework
Version

Prefer object syntax for useQuery

You can use useQuery in two different ways.

Standard

tsx
useQuery(queryKey, queryFn?, options?)

// or

useQuery(options)
useQuery(queryKey, queryFn?, options?)

// or

useQuery(options)

This rule prefers the second option, as it is more consistent with other React Query hooks, like useQueries. It will also be the only available option in a future major version.

Rule Details

Examples of incorrect code for this rule:

js
/* eslint "@tanstack/query/prefer-query-object-syntax": "error" */

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

useQuery(queryKey, queryFn, {
  onSuccess,
});

useQuery(queryKey, {
  queryFn,
  onSuccess,
});
/* eslint "@tanstack/query/prefer-query-object-syntax": "error" */

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

useQuery(queryKey, queryFn, {
  onSuccess,
});

useQuery(queryKey, {
  queryFn,
  onSuccess,
});

Examples of correct code for this rule:

js
import { useQuery } from '@tanstack/react-query';

useQuery({
  queryKey,
  queryFn,
  onSuccess,
});
import { useQuery } from '@tanstack/react-query';

useQuery({
  queryKey,
  queryFn,
  onSuccess,
});

When Not To Use It

If you don't care about useQuery consistency, then you will not need this rule.

Attributes

  • ✅ Recommended
  • 🔧 Fixable

Credits

This rule was initially developed by KubaJastrz in eslint-plugin-react-query.

Want to Skip the Docs?
Query.gg - The Official React Query Course
“This course is the best way to learn how to use React Query in real-world applications.”—Tanner Linsley
Check it out