useQuery not refetching after cacheTime / staleTime expired

[marko-x]

Hey react-query Team. Thank you for providing us such a nice library. I really enjoy working with this.

Describe the bug
On rerendering a component the useQuery hook is not calling the fetch function again. Just on init and one(!) state change the effect runs.

To Reproduce
I created a demo:
https://codesandbox.io/s/thirsty-snow-lskrd?file=/src/App.tsx

import { useState } from "react";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import "./styles.css";

const STALE_TIME = 500;
const CACHE_TIME = 1000;

type ResponseData = {
  uuid: string;
  date: string;
};

const fakeRequest = async (uuid: string): Promise<ResponseData> => {
  await new Promise((r) => setTimeout(r, 3000));
  return {
    uuid,
    date: new Date().toISOString()
  };
};

const useFakeFetch = (uuid: string) =>
  useQuery<ResponseData>(["fakeKey", { uuid }], () => fakeRequest(uuid), {
    cacheTime: CACHE_TIME,
    staleTime: STALE_TIME
  });

const TestComponent = () => {
  const fetchFake = useFakeFetch("123-456");

  return (
    <div>
      <h2>TestComponent</h2>
      <b>
        {fetchFake.status}{" "}
        {fetchFake.isFetching && (
          <span
            style={{
              backgroundColor: "green",
              color: "#fff",
              padding: "0.5rem"
            }}
          >
            (fetching)
          </span>
        )}
      </b>
      <div>
        <b>Data updated at:</b>
        {new Date(fetchFake.dataUpdatedAt).toISOString()}
      </div>
      <pre>{JSON.stringify(fetchFake.data, null, 2)}</pre>
    </div>
  );
};

const queryClient = new QueryClient();

const PageComponent = () => {
  const [currentState, setState] = useState<number>(0);
  return (
    <div style={{ border: "1px solid grey", padding: "1rem" }}>
      <h2>PageComponent</h2>
      <p>Change the state of PageComponent:</p>
      <button onClick={() => setState(Math.random())}>change state</button>
      <small>current state (random): {currentState}</small>
      <div
        style={{ border: "1px dashed grey", padding: "1rem", margin: "0.5rem" }}
      >
        <TestComponent />
      </div>
    </div>
  );
};

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>APP</h1>
        <ol>
          <li>On init the TestComponent is fetching.</li>
          <li>
            On click "change state" the PageComponent rerenders and triggers the
            refetch in TestComponent.
          </li>
          <li>
            <b>but</b> on another click, state change and resulting rerendering
            the TestComponent <b>will not</b> refetch again. Why?
          </li>
        </ol>

        <pre>{JSON.stringify({ STALE_TIME, CACHE_TIME }, null, 2)}</pre>
        <PageComponent />
      </div>
    </QueryClientProvider>
  );
}

Expected behavior
After staleTime or cacheTime is expired the useQuery hook have to call the related fetch function again.

Screenshots
see demo

Desktop (please complete the following information):
I am using react-native but the "bug" appears in all browsers and OS environments.

Smartphone (please complete the following information):
In my react-native project this appears in Android and iOS.

Additional context
No other context. Maybe i understood the library hooks in a wrong way.
Thank you for your help!

[TkDodo]

Maybe i understood the library hooks in a wrong way.

I'm afraid that's the case. please have a look at the following docs / articles and let's continue in a discussion:

• https://react-query.tanstack.com/guides/important-defaults
• https://react-query.tanstack.com/guides/caching
• https://tkdodo.eu/blog/practical-react-query

[marko-x]

Ok. I am using the docs a lot. And i thought i understood the concept.

I have two questions:

1. Can you explain, why the first state change in PageComponent triggers a rerender after cacheTime expiration?
2. Without my expected behaviour (the useQuery is refetching after rerender and cacheTime expiration) should i always call the refetch() from the initialized useQuery-hook with a custom useEffect()?

The target is to use something like refetchOnWindowFocus but within a navigation tree where mounted pages and drawer came into focus. In react-navigation (react-native) a lot of components stay mounted to improve speed (e.g. page transitions) and prevent "flickering" and "stottering".
So i have to wrap all useQuery-hook with a wrapper hook with <QueryObserverResult>.refetch()?

Thank you for your help.

[TkDodo]

1. Can you explain, why the first state change in PageComponent triggers a rerender after cacheTime expiration?

As long as you have an active observer, so as long as the useQuery is rendered on the screen, cacheTime cannot "expire", because the cacheTime timer is only for then when the query is unused.

If you mean after staleTime expires, then that is because the query returns an isStale boolean flag, and that transitions from false to true, so it re-renders.

2. Without my expected behaviour (the useQuery is refetching after rerender and cacheTime expiration) should i always call the refetch() from the initialized useQuery-hook with a custom useEffect()?

if you keep things visually hidden on your screen and mounted in the dom, they are considered as active. react-query can't know if they are hidden or not, we only know the component tree, so if something is mounted or not.

I guess you, as a developer, still get some sort of event when such a navigation change happens? If so, you can call refetch then, or if you have this information available in state, you can put it in the queryKey and disable the query if it's visually hidden. That might be the best, because you'll get an automatic refetch if the query enables, and you are not getting background refetches while it is disabled.

I think we've also discussed something similar here: #2208

[marko-x]

Thank you for you reply.

What i thought: The enable in useQuery is just a "when i am enabled i am listen to changes after invalidateQueries"-feature.
Because of your answer I checked some things.

you can put it in the queryKey and disable the query

And i don't know (until now) that switching the enable value from false to true the useQuery triggers the related fetch function! Just switching the enable-value.

So that was easy and what i am looking for.

If you have the time could you have a look at this codesandbox I just created?
https://codesandbox.io/s/fervent-snyder-7i40m?file=/src/App.tsx
Is this the right approach?

Thank you.

[marko-x]

Oh, and i just realized that one refetch after first click is caused by the Codesandbox itself. A click into the built-in browser triggers the refetchOnWindowFocus.

Screen.Recording.2021-08-16.at.15.48.53.mov

[marko-x]

The enable option in useQuery is the game changer here.
Based on the answer I created an example for react-navigation in combination with useQuery hooks.

https://codesandbox.io/s/react-navigation-with-react-query-0ywvd?file=/src/App.tsx