How to handle the case with pagination when a last item on a page is deleted

[ilijavuk]

Hello!
I'm having trouble with an edge case with pagination.
I'm rendering a paginated table in which the data is fetched using useQuery where the key looks like this: ['jobs', page, limit].
Each time the pagination changes, queryParams are updated and new data is fetched during which cached data is served.

The case I'm struggling with is how to handle the deletion of the last item on a page. Usually during deletion we just invalidate the 'jobs' query and that works splendidly. My pagination component is capable of detecting that a record (and the page) has been deleted and automatically stops rendering the now-deleted page and moves the user to the previous page.
However, before pagination can do all of that, the query for the soon-to-be-deleted page is refetched and cached with the new, decremented recordsCount.
Because of that, when a user deletes the last item on a page, adds a new job and navigates to the new page, a problem occurs. The cached data is first served (in which the page shouldn't exist) and the pagination component automatically moves the user to the previous page.

Here's a codesandbox in which you can try this behaviour out: https://codesandbox.io/p/devbox/36vhj2

The steps for reproducing this behaviour are:

Initially, there are 11 existing jobs.

1. Navigate to page 3
2. Delete "Job 11" - the query is invalidated, ['jobs', 3, 5] is refetched, and the totalCount is now 10. The third page no longer exists and you are moved to page 2
3. Click the "Add new job" button - ['jobs', 2, 5] is refetched, and the totalCount (for page 2) is now 11. The third page appears
4. Click the page 3 - ['jobs', 3, 5] is restored from the cache - totalCount there is 10. The query is stale and a refetch triggers. But, because the totalCount is 10, page 3 shouldn't exist and you're redirected to page 2.
5. ['jobs', 2, 5] is restored from the cache. TotalCount there is 11 - page 3 appears again. In the meantime, ['jobs', 3, 5] finished fetching
6. Click page 3 again - ['jobs', 3, 5] has been fetched and the totalCount there is 11.

The bug occurs in step number 4. Because of the refetching for page 3 when page 3 no longer exists, the wrong totalCount is cached for that page.

One fix that works is changing the refetchType on invalidateQueries in createJobMutation to all:

queryClient.invalidateQueries({ queryKey: ["jobs"], refetchType: "all" });

When a new item is created, ['jobs', 3, 5] is also refetched, and thus the bug is fixed.

Is this the proper way to solve this problem?
If not, could you provide me with any guidance on how to handle this case? Thanks in advance.

[TkDodo]

seems like you want to remove pages from the cache that are empty, maybe with queryClient.removeQueries ?