How to deal with pagination?

[jdoklovic]

I have several endpoints that use pagination.
For each request I can pass startAt and maxResults.
In the response I get total and isLast so I know when I'm at the last page.

This is all fine if I just use "normal" caching, but the problems arise when I need to mutate things in the list.

For example, let's say I have an endpoint that returns a list of comments paginated in chunks of 50 comments: GetComments
The user can click a "load next page" button to get the next page of results.

At some point, the user can add a new comment, edit an existing comment they made, or delete a comment they made.
When these mutations happen, I don't know how to handle the cache updates for the GetComments cache.
Either it's split into multiple caches by url params, in which case I don't know which cache to look up when a mutation happens, or I use a requestID, but then the pagination doesn't work unless I add the startAt to the id, but then I'm back to not knowing which cache the updated object is in.

any ideas?

I guess the one idea I had was to introduce a "group" or something to the cache config.
Like:
{cache: { group: 'comments' } }

I would add this to the GetComments call and it would still cache based on the url params like it does today, and if you call this method again with the same params, you'd get the same response.

The difference being, these responses are also accessible as an array with the id 'comments'.
For example, when I call UpdateComment(commentId) I could do something like this:

{
                cache: {
                    update: {
                        group_comments: (groupCommentCacheArray, updatedCommentResponse) => {
                            // If the cache doesn't have a cached state, we don't need
                            // to update it
                            if (groupCommentCacheArray.state !== 'cached') {
                                return 'ignore';
                            }

                            // find the comment and update it
                            groupCommentCacheArray.forEach((commentCache) => {
                                  const index = commentCache.data.data.comments.findIndex(
                                            (comment) => comment.id === commentResponse.data.id,
                                   );
                                   if (index !== -1) {
                                          commentCache.data.data.comments[index] = commentResponse.data;
                                    }
                             });

                            // Return the same cache state, but a updated one.
                            return groupCommentCacheArray;
                        },
                    },
                },
            }

This is probably not the greatest approach, but I don't have any better ideas right now.

Thoughts?