noTanstackQueryRestDestructuring (JavaScript)

Language JavaScript (and super languages)

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.6.3
• Diagnostic Category: lint/nursery/noTanstackQueryRestDestructuring
• This rule doesn’t have a fix.
• The default severity of this rule is warning.
• This rule belongs to the following domains:
  • tanstackQuery
• Sources:
  • Same as @tanstack/query/no-rest-destructuring

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noTanstackQueryRestDestructuring": "error"
      }
    }
  }
}

Description

Disallow rest destructuring and object spread on TanStack Query results.

The object returned by a TanStack Query function such as useQuery keeps track of the properties that a component reads. The component only updates when one of those properties changes.

Collecting the remaining properties with a rest element (...rest), or copying the result into another object with a spread (...query), reads every property. The component then updates each time any part of the query changes, even the parts that the component doesn’t use.

This rule checks the results of the following functions, when they are imported from a TanStack Query package such as @tanstack/react-query or @tanstack/svelte-query:

• useQuery, useInfiniteQuery, useSuspenseQuery and useSuspenseInfiniteQuery
• useQueries and useSuspenseQueries
• createQuery, createInfiniteQuery and createQueries, the names that @tanstack/svelte-query uses

Note

The rule only checks direct calls to these functions. It doesn’t check the result of a custom function that wraps one of them.

Examples

Invalid

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

const { data, ...rest } = useQuery({ queryKey: ["todos"], queryFn: fetchTodos });

code-block.js:3:15 lint/nursery/noTanstackQueryRestDestructuring ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This rest element collects every remaining property of a TanStack Query result.
  
    1 │ import { useQuery } from "@tanstack/react-query";
    2 │ 
  > 3 │ const { data, ...rest } = useQuery({ queryKey: ["todos"], queryFn: fetchTodos });
      │               ^^^^^^^
    4 │ 
  
  ℹ A query result only updates the component when a property that the component reads changes. Collecting the remaining properties reads all of them, so the component updates on every change to the query.
  
  ℹ Remove the rest element and list the properties that you need.
  
  ℹ 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.
  

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

const query = useQuery({ queryKey: ["todos"], queryFn: fetchTodos });
const { data, ...rest } = query;

code-block.js:4:15 lint/nursery/noTanstackQueryRestDestructuring ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This rest element collects every remaining property of a TanStack Query result.
  
    3 │ const query = useQuery({ queryKey: ["todos"], queryFn: fetchTodos });
  > 4 │ const { data, ...rest } = query;
      │               ^^^^^^^
    5 │ 
  
  ℹ A query result only updates the component when a property that the component reads changes. Collecting the remaining properties reads all of them, so the component updates on every change to the query.
  
  ℹ Remove the rest element and list the properties that you need.
  
  ℹ 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.
  

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

const query = useQuery({ queryKey: ["todos"], queryFn: fetchTodos });
const result = { ...query, todos: query.data };

code-block.js:4:18 lint/nursery/noTanstackQueryRestDestructuring ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This spread copies every property of a TanStack Query result.
  
    3 │ const query = useQuery({ queryKey: ["todos"], queryFn: fetchTodos });
  > 4 │ const result = { ...query, todos: query.data };
      │                  ^^^^^^^^
    5 │ 
  
  ℹ A query result only updates the component when a property that the component reads changes. Copying the result reads all of its properties, so the component updates on every change to the query.
  
  ℹ Remove the spread and copy the properties that you need.
  
  ℹ 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.
  

import { useQueries } from "@tanstack/react-query";

const [{ data, ...rest }] = useQueries({
    queries: [{ queryKey: ["todos"], queryFn: fetchTodos }],
});

code-block.js:3:16 lint/nursery/noTanstackQueryRestDestructuring ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This rest element collects every remaining property of a TanStack Query result.
  
    1 │ import { useQueries } from "@tanstack/react-query";
    2 │ 
  > 3 │ const [{ data, ...rest }] = useQueries({
      │                ^^^^^^^
    4 │     queries: [{ queryKey: ["todos"], queryFn: fetchTodos }],
    5 │ });
  
  ℹ A query result only updates the component when a property that the component reads changes. Collecting the remaining properties reads all of them, so the component updates on every change to the query.
  
  ℹ Remove the rest element and list the properties that you need.
  
  ℹ 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.
  

<script>
import { createQuery } from "@tanstack/svelte-query";

const query = createQuery(() => ({ queryKey: ["todos"], queryFn: fetchTodos }));
const { data, ...rest } = query;
</script>

code-block.svelte:5:15 lint/nursery/noTanstackQueryRestDestructuring ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This rest element collects every remaining property of a TanStack Query result.
  
    4 │ const query = createQuery(() => ({ queryKey: ["todos"], queryFn: fetchTodos }));
  > 5 │ const { data, ...rest } = query;
      │               ^^^^^^^
    6 │ </script>
    7 │ 
  
  ℹ A query result only updates the component when a property that the component reads changes. Collecting the remaining properties reads all of them, so the component updates on every change to the query.
  
  ℹ Remove the rest element and list the properties that you need.
  
  ℹ 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.
  

Valid

import { useQueries, useQuery } from "@tanstack/react-query";

const { data, isPending } = useQuery({ queryKey: ["todos"], queryFn: fetchTodos });

const query = useQuery({ queryKey: ["users"], queryFn: fetchUsers });
const users = query.data;

const [first, { data: posts }, ...others] = useQueries({
    queries: [
        { queryKey: ["todos"], queryFn: fetchTodos },
        { queryKey: ["posts"], queryFn: fetchPosts },
        { queryKey: ["users"], queryFn: fetchUsers },
    ],
});

<script>
import { createQuery } from "@tanstack/svelte-query";

const query = createQuery(() => ({ queryKey: ["todos"], queryFn: fetchTodos }));
</script>

<p>{query.data.length} todos</p>

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases
• Try in the playground