TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
42.72k stars 2.93k forks source link

isFetching is always true when useQueries have duplicate query #8224

Closed tychenjiajun closed 3 weeks ago

tychenjiajun commented 1 month ago

Describe the bug

isFetching, isLoading is always true when useQueries have duplicate query

  const { data, isFetching, isLoading, isFetched } = useQueries({
    queries: [query, query, query2],
    // queries: [query],
    combine: useCallback((result) => {
      return {
        data: result[0].data,

        isFetching: result.some((r) => r.isFetching),
        isLoading: result.some((r) => r.isLoading),
        isFetched: result.every((r) => r.isFetched),
      };
    }, []),
  });

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/elegant-kapitsa-c3c357

Steps to reproduce

import "./styles.css";
import { useCallback } from "react";

import {
  useQueries,
  queryOptions,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";

const query = queryOptions({
  queryKey: ["users"],
  async queryFn() {
    const result = await fetch("https://jsonplaceholder.typicode.com/users");
    return await result.json();
  },
});

const query2 = queryOptions({
  queryKey: ["posts"],
  async queryFn() {
    const result = await fetch("https://jsonplaceholder.typicode.com/posts");
    return await result.json();
  },
});

const client = new QueryClient();

const Example = () => {
  const { data, isFetching, isLoading, isFetched } = useQueries({
    queries: [query, query, query2],
    // queries: [query],
    combine: useCallback((result) => {
      return {
        data: result[0].data,

        isFetching: result.some((r) => r.isFetching),
        isLoading: result.some((r) => r.isLoading),
        isFetched: result.every((r) => r.isFetched),
      };
    }, []),
  });

  return (
    <div>
      {isFetching && "isFetching"}
      {isLoading && "isLoading"}
      {isFetched && "isFetched"}
      {data?.length}
    </div>
  );
};

export default function App() {
  return (
    <QueryClientProvider client={client}>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Example />
      </div>
    </QueryClientProvider>
  );
}

Expected behavior

expect isFetching and isLoading to be false

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOs 15.0.1

Tanstack Query adapter

react-query

TanStack Query version

5.59.16

TypeScript version

No response

Additional context

No response

tychenjiajun commented 1 month ago

Maybe duplicated https://github.com/TanStack/query/pull/4303 https://github.com/TanStack/query/issues/4187

It might be better if we have runtime warning in development