Invalidate infinite query after deleting items

[AdhamMoussa]

I'm using useInfinteQuery hook to fetch paginated data. one edge case causing a bug:
let's say user scrolled down until they reached the last page,
when deleting multiple items and based on that, the last page now doesn't exist on backend. when calling invalidateQueries after the mutation, all pages are re-fetched again. even though the last page is not exist now.
the page param is null as returned from getNextPageParam
how to prevent calling the query function if pageParam is null?

I could do it manually by updating the cache but it seems like an unnecessary complexity. is there an easy way to do this?

[TkDodo]

hmm that's a really interesting case. can you make a codesandbox reproduction?

[AdhamMoussa]

You can use Promise.resolve to mock api calls ;)

so sorry it will be so diificult to mock the pagination logic. I have no time now to do it. The issue is straightforward. any simple pagination case will have the same issue.
I hope this is solved in the future.

Also I want to thank you all for this amazing library.

[TkDodo]

There might be an issue here so if you’d create a reproduction it will be easier to get to the bottom of it.

[AdhamMoussa]

@TkDodo
https://codesandbox.io/s/relaxed-chatterjee-7oj7t

steps:
1- click on load more
2- delete 2 items

[TkDodo]

Thank you. It seems to have been a simple fix here: getNetxtPageParam needs to return undefined to indicate that there is no next page, but you return null. See the docs here under getNextPageParam.

So you return null and then coerce it back to 1 when doing:

page = page || 1

If you change it to undefined, react-query will know that it needs to stop fetching. It will still work for the first page. Here is the changed sandbox: https://codesandbox.io/s/proud-silence-wfts

[AdhamMoussa]

@TkDodo oh great it works. thanks so much

[vinayroy1]

my paginate api taking offset as 0, 1, 2,3,4... and size=number. and in response i am not getting any offset or total page size param. just getting data. so how to handle getnextpageparam. and also i wants to implement delete item from infinite list

[TkDodo]

the total pages are also passed to getNextPageParam, so you can use that length to compute the next offset

[vinayroy1]

'lastPage', [ { totalExpensesAmount: 15792,
expenses:
[ { branchId: 98,
expenseId: 3554,
expenseType: 'SALARY',
expenseAmount: 8000,
expenseDate: '2024-01-07',
expenseDescription: 'Yyyy' },
{ branchId: 98,
expenseId: 4011,
expenseType: 'SALARY',
expenseAmount: 400,
expenseDate: '2024-01-07',
expenseDescription: 'Hello' },
{ branchId: 98,
expenseId: 4111,
expenseType: 'SALARY',
expenseAmount: 600,
expenseDate: '2024-01-07',
expenseDescription: 'Hiii' },
{ branchId: 98,
expenseId: 4157,
expenseType: 'SALARY',
expenseAmount: 500,
expenseDate: '2024-01-06',
expenseDescription: '' },
{ branchId: 98,
expenseId: 4173,
expenseType: 'SALARY',
expenseAmount: 999,
expenseDate: '2024-01-04',
expenseDescription: 'Hiii' },
{ branchId: 98,
e<…>