Pagination, last page, last item delete and invalidate

[rlesniak]

Hey. How did you solved case when you have pagination, you are on last page (eg. 12 of 12) which has only one item. You are doing mutation which removes this last item. On success you call invalidateQueries.
In my case server returns 404 because GET /api/list?page=12 does not exist so onError is called and app has runtime error.

Did anyone have similar case? How do you handle that case?

[TkDodo]

I don't think it should go that far. getNextPageParam should return undefined if there is no next page. So useInfiniteQuery will refetch all pages in succession, and getNextPageParam is called for all of them. When you reach page 11, the "next" pointer should not exist, because page 12 is not there, so it should return undefined, which means page 12 should not be fetched.

if that's not the case - can you provide a codesandbox reproduction?

[rlesniak]

I am not talking about infinite query, just normal useQuery with page in query params. But I'll try to prepare some CS demo

[TkDodo]

oh okay, that wasn't clear from the question. if you allow delete from the list, yes, you would need to either handle 404 and redirect to a different page, or re-set the currentPage to something else if the last entry was deleted.

[mwskwong]

oh okay, that wasn't clear from the question. if you allow delete from the list, yes, you would need to either handle 404 and redirect to a different page, or re-set the currentPage to something else if the last entry was deleted.

If choosing to re-set the current page, will it be something like this:

useDeleteMutuaion({
  onSuccess: () => {
    const data = queryClient.getQueryData<Data>(queryKeyOfCurrentPage);
      const lastItemInLastPage =
        data &&
        data.totalPage > 1 &&
        data.totalPage === page &&
        data.itemsInCurrentPage === 1;
    
      if (lastItemInLastPage) {
        setSearchParams((searchParams) => {
          searchParams.set("page", (page - 1).toString());
          return searchParams;
        })
      }
    
      void queryClient.invalidateQueries({
        queryKey,
        refetchType: lastItemInLastPage ? "none" : "active", // using React Router. When, navigating to page - 1, the loader will do the fetching
      });
  }
})