Paginated queries, optimistic updates and data structure
Hello everyone! I have been using react-query for over 2 years, and normally it solves all my problems related to fetching and caching data, but there's always been a specific problem I haven't been able to solve, so I'm wondering if I'm missing something.
Imagine a blog page where a user can write comments about the post they are seeing.
The normal flow is to fetch the post comments in a paginated manner that allows the user to keep loading more comments as he scrolls. If the user writes a comment, we produce an optimistic update by displaying the comment in a transient state in the list of comments. If the comment's publication succeeds, the transient state is removed. If the publishing fails, the comment is updated to an error state, and the user can retry the action.
Furthermore, the user can take actions such as deleting comments, editing comments, and so on.
Taking into account that we would use a useInfiniteQuery to fetch the comments, any operation on the cache would be a bit expensive as we would need to run a O(n^2) operation to update the correct comment as the cache is stored by pages.
Another thing to take into account is that since we manually mutated the state, any refetch, such as a window focus, would make the comment in a transient state disappear.
Have you faced a similar challenge? And if so did you use react-query or implemented your on solution?
Thanks 👐
0 Replies