Best practice to execute the query when query key has not changed

[tparvi]

For most of our queries the query key is just the path to the api (i.e. api/get/customers) and the query parameters that are passed to the api. Most of the queries are executed by using useQuery and then just setting the enabled:true when user clicks button.

What is the best practice to execute the query even if the query key does not change? I have couple use cases:

a) Execute the query always even if the parameters (and thus the query key) is exactly the same
b) Execute the query even if the parameters (and thus the query key) have not changed IF previous data is more than x seconds old

It seems that setting the staleTime and/or cacheTime is not enough. Even if I set them to 100ms the query is not executed. Maybe it is because the query key has not changed? Do I need to use QueryClient's invalidateQueries and if so when do I do that without creating infinite loop where I invalidate the query which causes refeching which then causes invalidation of query etc.

[TkDodo]

Setting staleTime doesn't automatically trigger a fetch.
It seems that refetch returned from useQuery is what you are looking for.

[tparvi]

We might be doing something wrong but below you can see sample example. We have simple component which has button. When that button is clicked it sets enabled:true and query is executed. Everything works. How/where should I call refetch? I tried couple ways but it is quite difficult to avoid infinite loop. I looked into documentation but I didn't see any example on how to achieve this. With mutations it seems simple as the query execution is not tied to enabled flag.

export function MyComponent(props: GeneralDescriptionSelectorProps): React.ReactElement {
  const [searchEnabled, setSearchEnabled] = useState<boolean>(false);

  const query = useSearchCustomer(/* search parameters here */, {
    enabled: searchEnabled,
  });

  function onClick() {
    setSearchEnabled(true);
  }

  if (query.data && !query.error && searchEnabled) {
    // Data received we can disable the search
    setSearchEnabled(false);
  }

  return (
    <div>
      <button onClick={onClick}>Search</button>
      <div>rest of the ui</div>
    </div>
  );
}

[TkDodo]

1. you cannot call setSearchEnabled during render, like you do with setSearchEnabled(false);. That violates the rule that react render functions need to be pure.

2. why do you need a boolean flag? You have left out what the search parameters are (/* search parameters here */). Usually, it is enough to have the button click set the search parameters to state (or to the url for example). Then, the query can pick those up and trigger a fetch.

3. if the query parameters are the same as before (depending on what it is, you can do a deep equals check on them, or you can store the previous query parameters with something like usePrevious), you call refetch

---

export function MyComponent(props: GeneralDescriptionSelectorProps): React.ReactElement {
  const [searchParams, setSearchParams] = useState(undefined);

  const query = useSearchCustomer(['something', searchParams], {
    enabled: !!searchParams,
  });

  function onSearch(params) {
    if (isEqual(params, searchParams)) {
      query.refetch()
    } else {
      setSearchParams(params)
    }
  }

  return (
    <div>
      <MyFilterForm onSearch={onSearch} />
      <div>rest of the ui</div>
    </div>
  );
}