How to perform optimistic updates on Infinite Query

[aswinmohanme]

I have an infinite query that fetches all comments. All the comments are available in pages. I use commentsQuery.data.pages.flatMap((p) => p.data) to display it in a Flatlist.

I want to perform a comment insert, I want to optimistically update the comments list by appending the comment to the end. How can I achieve this? I have tried a lot of different ways, so any pointers would be really helpful.

[TkDodo]

It should work the same as optimistic updates on a normal query, except that you have to keep the structure in mind. The cached data is an object with two keys (pages and pageParams), so you’d likely want to create a new page with the new entry.

[aswinmohanme]

A new page with a single entry? Would that mess up the pagination ?

Thanks for the speedy reply.

[TkDodo]

well, "it depends". Let's assume you have a pageSize of 5, and 10 entries currently, which means two full pages. Now you add one, you'll probably need a 3rd page. On the other hand, if you only have 8 entries, meaning one full page and one page with only 3 entries, you can just append it to the last page.

So I think you'll need to add some logic to that "appending to the end". Can you always just append to the last page? Sure, but in the first example, you would have a page with 6 entries then (one too many), and then on the refetch, it will likely disappear again (because it belongs to the 3rd page). So it's not a super trivial thing to do :)