Cursor Based Pagination caching

Client SDKs
1

I have implemented cursor based pagination and its working as expected for my first call through useBackgroundQuery and useReadQuery. When I call fetchMore it will appropriately call the resolver with the after marked and it will return the next batch of data. But then it calls the resolver with the original variables again from useBackgroundQuery and my data stays with the first batch of data.

This is my merge function

  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          notes: {
            keyArgs: false,
            merge(existing = { pageInfo: {}, edges: [] }, incoming, { args, mergeObjects }) {
              if (args?.pagination?.after) {
                const result = {
                  pageInfo: mergeObjects(existing.pageInfo, incoming.pageInfo),
                  edges: [...existing.edges],
                };

                if (!incoming.edges) {
                  return result;
                }

                result.edges.push(...incoming.edges);
                return result;
              }

              return incoming;
            },
          },
        },
      },
    },
  }),

I see this merge correctly merging the 2 results yet its still making the 2nd call and only ever returning the first batch

When I use relayStylePagination() it will fetch and display the next batch but it doesn’t merge them

Thanks!

2

I’ve found my issue! I copy and pasted the code from relayStylePagination and in my data I’ve realized that I’ve put my after and before fields inside of a pagination object. I had to update the merge function to account for this difference.