T
TanStack•4y ago
rare-sapphire

optimistic *delete* with infinite query

What should I do if I want to implement optimistic delete? For example: - My page size is 10. In getNextPageParam, if the length of lastPage is less than 10, then return undefined to indicate that there's no more data. - The first page is loaded - I delete one item, setQueryData with 9 remaining items - getNextPageParam is called again. Now lastPage only has 9 < 10 items, and it doesn't load anymore. My hack is to replace the deleted item with null or undefined, and skip them when render.
3 Replies
genetic-orange
genetic-orange•4y ago
getNextPageParam is called again. Now lastPage only has 9 < 10 items, and it doesn't load anymore.
how is getNextPageParam implemented in your case?
rare-sapphire
rare-sapphireOP•4y ago
It's very simple check against page size 
getNextPageParam: (lastPage, allPages) => {
  if (lastPage.length < pageSize) {
    return undefined;
  }
  return allPages.length + 1;
}
getNextPageParam: (lastPage, allPages) => {
  if (lastPage.length < pageSize) {
    return undefined;
  }
  return allPages.length + 1;
}
genetic-orange
genetic-orange•4y ago
yeah if you check like that and then modify the length of the lastPage, it will not work. You could explicitly return the length of the pages from the queryFn (or from the backend for that matter) so that you have a reference to the original length and then use that. or, the null workaround is not too bad either

Did you find this page helpful?