Struggling with query invalidation

[mrlubos]

Hey! I am running into undesired UI states when trying to invalidate queries. The issue appears to be particularly with the infinite queries.

Scenario:
A user can belong to a team. Team contains records. An owner can delete the team, which also deletes all records.

Desired outcome:
If I visit the team records page after deleting the team, I should see an error because the team was deleted.

Actual outcome:
The team records page shows cached data.

How do I cache data?
All team related queries start with team-*. After deleting a team, I call queryClient.invalidateQueries('team'). This should invalidate all team queries and it appears to do so.

How do I fetch data?
I fetch records using useInfiniteQuery(), nothing fancy.

Problem:
When I view the team records page after deleting the team, the API request fails with 404 as the team no longer exists. However, I can see the previous infinite query data is still there. It appears that due to the error response, the cache does not get cleared/overridden. In my case, returning undefined would work. Strangely, the isError response is false, too. If I refresh the page, isError becomes true as expected. I am unable to test the cache state as there would be no previous data at that point.

Am I doing something wrong or is this a bug with react-query?

Update:
I can achieve the expected behaviour if I invalidate the specific query for team records. This is not maintainable though as I'd have to remember to clear every team feature (very easy to forget to do so).

Update 2:
The solution above still does not clear the data, but it correctly sets isError to true which is enough in my case. Not sure why it's not true when using fuzzy match.

[mrlubos]

cc @tannerlinsley @TkDodo

[TkDodo]

query invalidation doesn't refetch per se, and it also never removes any data. It refetches queries that are active and stale, and inactive queries get marked as stale so that they refetch when you next mount them.

when a query that already had successful data once gets an error, it will have an error set as well as data set - but the status should be error, so isError should be true. It depends on the use-case if you want to show the error or the data here. If you say that isError is false, then this sounds not-okay - can you please reproduce this in a codesandbox?

you can also work with removeQueries or resetQueries instead of invalidating to really remove the entries from the cache - this sounds more what you want in your scenario.

[mrlubos]

Thanks @TkDodo. I've tried both removeQueries and resetQueries but none worked in my case. I want to only show the error so invalidateQueries works for me. I am not sure how I could reproduce this because I need to have a counterpart API that returns OK 200 at first but ERR 404 later. Any ideas?

[TkDodo]

let first = true

const fetchQuery = () => {
  if (first) {
    first = false
    return Promise.resolve("ok-data")
  }
  return Promise.reject("some-error") 
}

const useMyQuery = () => useQuery('key', fetchQuery}

🤷

[mrlubos]

@TkDodo Thanks!