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
40.1k stars 2.69k forks source link

The query status does not change when the query is activated after being inactive despite executing queryFn #7346

Closed aahahocevar closed 2 weeks ago

aahahocevar commented 2 weeks ago

Describe the bug

First of all, I want to thank you for your great work with this library!

In the following code, when clicking on the "Toggle" button the query will be executed correctly and the status value will change as expected, when deactivating the query and activating it again, the status does not change, always remaining in "success" even though the function queryFn is executed again:

export default function App() {
  const [info, setInfo] = useState("nothing");
  const [enable, setEnable] = useState(false);

  const q = useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      setInfo("axios get start");
      const r = await axios.get("https://randomuser.me/api?results=10");
      setInfo("axios get end");
      return r;
    },
    enabled: enable,
  });

  return (
    <div className="App">
      <h1>Query Info: {info}</h1>
      <h1>Query status: {q.status}</h1>
      <button
        onClick={() => {
          setInfo(!enable ? "enabled" : "disabled");
          setEnable(!enable);
        }}
      >
        Toggle
      </button>
    </div>
  );
}

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/possiblereactquerybug-xrmgql

Steps to reproduce

  1. Open the minimal reproducible example.
  2. Click on the "toggle" button to enable the query (see how q.status is changing).
  3. Click the "toggle" button again to disable the query.
  4. Click the "toggle" button again to enable the query.
  5. Notice how the value of q.status did not change even though the queryFn function was executed

Expected behavior

I think that the value of q.status should change to "pending" and then to "success" if the query was successful every time queryFn is executed

How often does this bug happen?

Every time

Screenshots or Videos

reactQueryBug

Platform

Tanstack Query adapter

None

TanStack Query version

v5.29.2

TypeScript version

v5.4.5

Additional context

No response

TkDodo commented 2 weeks ago

the query status has 3 values:

when a background refetch occurs, the status does not go back to pending. That is per design. Have a look at the fetchStatus for your needs.