Open
Description
Describe the bug
If you use useQuery
with enabled: false
and dynamic keys you can miss re-renders because of missing fetchStatus
updates.
I.e. in this example (also posted on codesandbox) provided re-render will be triggered only when fetching the data is complete.
Your minimal, reproducible example
https://codesandbox.io/p/devbox/solitary-rgb-7szrj2
Steps to reproduce
Run the example (it's the copy of codesandbox) and press the button "Set ID and trigger user load":
import { createRoot } from "react-dom/client";
import {
QueryClient,
QueryClientProvider,
useQuery,
} from "@tanstack/react-query";
import { useState } from "react";
const queryClient = new QueryClient();
const useUserInfoQuery = ({
id,
enabled,
}: {
id: number | null;
enabled: boolean;
}) => {
return useQuery({
queryKey: ["user", id],
queryFn: () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ id, name: "John" });
}, 2000);
});
},
enabled: !!id && enabled,
});
};
const App = () => {
const [id, setId] = useState(null);
const searchQuery = useUserInfoQuery({ id, enabled: false });
return (
<>
<div>User fetching status is {searchQuery.fetchStatus}</div>
<UserInfo id={id} />
<button onClick={() => setId(42)}>Set ID and trigger user load</button>
</>
);
};
function UserInfo({ id }: { id: number | null }) {
const searchQuery = useUserInfoQuery({ id, enabled: true });
return <div>UserInfo data is {JSON.stringify(searchQuery.data)} </div>;
}
createRoot(document.getElementById("root")!).render(
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
);
Expected behavior
Expected behavior:
- I see
User fetching status is fetching
until the user info is updated
Actual behavior:
- I always see
User fetching status is idle
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: macOS 14.5
- Browser: Google Chrome 133.0.6943.142 (Official Build) (arm64)
Tanstack Query adapter
None
TanStack Query version
5.66.11
TypeScript version
5.7.3
Additional context
Here are some of the factors which matter for bug reproducibility:
- setting constant
queryKey
instead of dynamic makes the bug disappear - changing composition of components affects the bug (e.g. moving
<div>User fetching status is {searchQuery.fetchStatus}</div>
to a separate component may make the bug disappear) - if you trigger re-render by something else (e.g. by adding
useIsFetching
) the bug is not reproduced
Metadata
Metadata
Assignees
Labels
No labels