How to invalidate/reset queries to undefined?

[blackarctic]

Hello,

I am coming from SWR where invalidating a query means resetting the data back to undefined while the data is revalidated. This is important for situations where the data is no longer acceptable until it is revalidated. In React Query this does not seem to be the case, as invalidating data keeps it in cache until the revalidation is complete. The closest solution I could find with React Query was to call queryClient.resetQueries instead of queryClient.invalidateQueries but this does not reset to undefined if using data hydration, leading to weird UI states. Am I missing something here?

In case I am not missing something, I would propose adding something like a resetToUndefined: boolean option to queryClient.resetQueries that would ignore the default value and instead reset to undefined.

In addition, I would propose adding a isManuallyInvalidated: boolean to the state of a query. This would be great for those building the UI to be able to know if data has been manually invalidated with invalidateQueries but make the decision themselves on whether or not to continue to display that invalidated data.

I would be happy to do this work. I would just like to discuss it first.

[TkDodo]

resetQueries resets to the initial state. If you have initialData, it will reset to that. Active queries will also be refetched so it sounds like you want that. You can also try queryClient.setQueryData(key, undefined)

[blackarctic]

setQueryData does not allow you to pass a query key filter, so you would need to know the exact key of the request. Therefore, this is not comparable to the invalidateQueries or resetQueries functions.

[boschni]

Are these options of any help?

queryClient.removeQueries()

Or:

queryClient.getQueryCache().findAll(filters).forEach(query => query.setData(undefined))

[blackarctic]

Thanks for the response @boschni.

queryClient.removeQueries() does nothing. In removing the query, it also removes the subscribe so the UI doesn't update to reflect the removed query. It also doesn't revalidate as the key has been removed. Ultimately, this isn't what we want anyway, since we don't want to remove the entire query, we just want to invalidate the data and set it to undefined while it revalidates.

queryClient.getQueryCache().findAll(filters).forEach(query => query.setData(undefined)) seems to get the job done. Although, it would be great if this were baked into queryClient.resetQueries or queryClient.invalidateQueries. Here is the working code:

const resetQueriesToUndefined = (queryFilter) => {
  queryClient
    .getQueryCache()
    .findAll(queryFilter)
    .forEach((query) => query.setData(undefined));
  queryClient.invalidateQueries(queryFilter);
};