How to fix Pagination in Apollo Client Not Doing Anything?

Question

All of my code is here: https://github.com/henryboisdequin/swimmingly. I have a place where all of the public workouts are displayed (browse). I render 3 at a time (for testing) and the user can opt to load more. When I click to load more, the query is successful, returning the needed workouts but its not rendering onto the screen. My fetch more code is here:

// PS: this uses Chakra-UI
{data && data.allPublicWorkouts.hasMore ? (
        <Flex>
          <Button
            onClick={() => {
              fetchMore({
                variables: {
                  limit: variables.limit,
                  cursor:
                    data.allPublicWorkouts.workouts[
                      data.allPublicWorkouts.workouts.length - 1
                    ].createdAt,
                },
              });
            }}
            isLoading={loading}
            m="auto"
            my={8}
          >
            Load More
          </Button>
        </Flex>
      ) : null}

How can I fix this problem and have the load more working properly?

Answer 1

You may need to implement the equivalent of an updateQuery option for fetchMore to merged the newly-retrieved results with those cache. Here is a snippet from Apollo docs, demonstrating how to use updateQuery for a feed:

    ...
        onLoadMore={() =>
          fetchMore({
            variables: {
              offset: data.feed.length
            },
            updateQuery: (prev, { fetchMoreResult }) => {
              if (!fetchMoreResult) return prev;
              return Object.assign({}, prev, {
                feed: [...prev.feed, ...fetchMoreResult.feed]
              });
            }
          })
   ...

I imagine there is an analog for the framework you're using (assuming its not the same).