Closed tychenjiajun closed 3 weeks ago
isFetching, isLoading is always true when useQueries have duplicate query
isFetching
isLoading
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), }; }, []), });
https://codesandbox.io/p/sandbox/elegant-kapitsa-c3c357
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> ); }
expect isFetching and isLoading to be false
Every time
No response
macOs 15.0.1
react-query
5.59.16
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
Describe the bug
isFetching
,isLoading
is always true when useQueries have duplicate queryYour minimal, reproducible example
https://codesandbox.io/p/sandbox/elegant-kapitsa-c3c357
Steps to reproduce
Expected behavior
expect
isFetching
andisLoading
to be falseHow 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