noTanstackQueryVoidQueryFn (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noTanstackQueryVoidQueryFn
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- tanstackQuery
- types
Sources:
- Same as @tanstack/query/no-void-query-fn

How to configure

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

Description

Disallow TanStack Query functions that don’t return any data.

A query function is the function that you give to TanStack Query as queryFn, for example in the options of useQuery. TanStack Query saves the value that this function returns as the data of the query. If the function returns a promise, TanStack Query waits for the promise and saves its result instead.

TanStack Query doesn’t accept undefined as data. When a query function returns undefined, the query fails with an error. This usually happens because a return statement is missing, or because the function returns a value in some cases but not in others.

This rule checks every object property named queryFn. It reports the property when the function can return undefined, or a promise whose result is undefined.

When the function is written in the property itself, the rule checks every return statement and whether the end of the function can be reached. When the property refers to a function that is defined somewhere else, the rule only reports it if the function never returns any data.

If a query has no data to return, return null instead.

Examples

Invalid

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

3
useQuery({
4
    queryKey: ["todos"],
5
    queryFn: async () => {
6
        await fetch("/api/todos");
7
    },
8
});

/invalid-missing-return.js:5:5 lint/nursery/noTanstackQueryVoidQueryFn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This query function can return undefined.
  
    3 │ useQuery({
    4 │     queryKey: ["todos"],
  > 5 │     queryFn: async () => {
      │     ^^^^^^^
    6 │         await fetch("/api/todos");
    7 │     },
  
  ℹ TanStack Query doesn't accept undefined as the data of a query. The query fails with an error instead of saving a result.
  
  ℹ Return the data in every case. If there is no data to return, return null instead.
  
  ℹ 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.

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

3
useQuery({
4
    queryKey: ["todos"],
5
    queryFn: async () => {
6
        const response = await fetch("/api/todos");
7
        if (response.ok) {
8
            return response.json();
9
        }
10
    },
11
});

/invalid-missing-return-in-one-path.js:5:5 lint/nursery/noTanstackQueryVoidQueryFn ━━━━━━━━━━━━━━━━━

  ✖ This query function can return undefined.
  
    3 │ useQuery({
    4 │     queryKey: ["todos"],
  > 5 │     queryFn: async () => {
      │     ^^^^^^^
    6 │         const response = await fetch("/api/todos");
    7 │         if (response.ok) {
  
  ℹ TanStack Query doesn't accept undefined as the data of a query. The query fails with an error instead of saving a result.
  
  ℹ Return the data in every case. If there is no data to return, return null instead.
  
  ℹ 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.

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

3
async function refreshTodos(): Promise<void> {
4
    await fetch("/api/todos/refresh");
5
}
6

7
const options = queryOptions({
8
    queryKey: ["todos"],
9
    queryFn: refreshTodos,
10
});

/invalid-void-function.ts:9:5 lint/nursery/noTanstackQueryVoidQueryFn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This query function can return undefined.
  
     7 │ const options = queryOptions({
     8 │     queryKey: ["todos"],
   > 9 │     queryFn: refreshTodos,
       │     ^^^^^^^
    10 │ });
    11 │ 
  
  ℹ TanStack Query doesn't accept undefined as the data of a query. The query fails with an error instead of saving a result.
  
  ℹ Return the data in every case. If there is no data to return, return null instead.
  
  ℹ 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

1
import { queryOptions, useQuery } from "@tanstack/react-query";
2

3
useQuery({
4
    queryKey: ["todos"],
5
    queryFn: async () => {
6
        const response = await fetch("/api/todos");
7
        return response.json();
8
    },
9
});
10

11
useQuery({
12
    queryKey: ["selected-todo"],
13
    queryFn: () => null,
14
});
15

16
async function countTodos(): Promise<number> {
17
    return 3;
18
}
19

20
const options = queryOptions({
21
    queryKey: ["todo-count"],
22
    queryFn: countTodos,
23
});