Reset a query back to idle and rerender

[robcaldecott]

I am using a useQuery with enabled: false for a user search, triggering the request using refetch. I want to offer a Reset button that will remove the existing query and rerender the form: basically resetting everything back to the initial idle state.

I can use queryCache.invalidateQueries("key") to invalidate the query but am struggling to find an elegant way to rerender when that happens. When using useMutation however, you can call reset and this seems to do the trick. However, in this case I am using a GET where useMutation feels like the wrong fit.

How are other people managing this pattern?

e.g.

const query = useQuery("key", fetchData, { enabled: false }); 
const queryCache = useQueryCache();

{query.isIdle && <MyForm onSubmit={query.refetch} />

{query.isSuccess && <Data data={query.data}>
  <button onClick={() =>{
    queryCache.removeQueries("key");
    // Force rerender with query back to "idle"
}}>Reset</button>
</Data>}

[joeldmyers]

I think you can pull the remove method off of useQuery to do the same? So change it so that onClick does:

<button onClick={() => {
  query.remove();
}}>Reset</button>

https://react-query.tanstack.com/reference/useQuery (remove is down at the bottom).

That should reset isIdle and isSuccess to the pre-fetched status and force a re-render.

[acontreras89]

I too would love to have this feature added. I've been using different approaches to achieve this:

• Using queryClient.resetQueries(queryKey)
• Using query.remove() and query.refetch() together

The former is a bit annoying since need to use useQueryClient, which ends up bloating the code a little bit.
The later is OK, although I realized these methods change in every (or most) render(s).
In any case, it would be nice to have this out of the box.

[TkDodo]

The former is a bit annoying since need to use useQueryClient, which ends up bloating the code a little bit.

you can return a reset method from a custom hook.

The later is OK, although I realized these methods change in every (or most) render(s).

the remove method returned from useQuery is referentially stable between renders. There is no reset method returned from useQuery 🤔 ?

[acontreras89]

@TkDodo I've performed some tests from my app and everything seems to be working just fine. Do you know when can we expect this feature to be released? Do you need any help getting this finished (e.g. updating the docs or anything)?

[TkDodo]

docs and tests are missing, didn't get around to it. if you add that, we could merge it I think

[acontreras89]

Sure, no prob 🙃 any guidance you can provide would be appreciated, tho (e.g. where to find similar tests)

[TkDodo]

I guess the remove test might be similar?
https://github.com/tannerlinsley/react-query/blob/bac853fb3c5f4f2c1fb1fa15bc3be9368494ef3d/src/react/tests/useQuery.test.tsx#L949

[acontreras89]

@TkDodo I opened a PR against your fork with updated docs and tests for the new reset function. Let me know if you need anything else.

[SakarDev]

queryClient.resetQueries({ keyName, exact: true });

as written in their docs