Incoming and existing cache data not merging, Apollo 3 pagination with field policies

[meesfrenkelfrank]

Intended outcome:

I have the following GraphQL query:

query GetNodes($customKey: String!, $limit: Int, $offset: Int,) {
  getNodes(customKey: $customKey, limit: $limit, offset: $offset) {
    __typename
    nodes {
      uuid
      title
    }
  }
}

And configured the cache with a merge function:

new InMemoryCache({
  typePolicies: {
    GetNodes: {
      fields: {
        nodes: {
          merge(existing = [], incoming: unknown[]) {
            console.log('Existing', existing);
            console.log('Incoming', incoming);
            return [...existing, ...incoming];
          },
        },
      },
  },
})

I am using Apollo client fetchMore function to be able to fetch more items.

Also I tried to disabling normalization for GetNodes object:

new InMemoryCache({
  typePolicies: {
    GetNodes: {
      keyFields: false,
      merge: true,
      fields: {
        nodes: offsetLimitPagination(),
       },
      },
  },
})

But same issue. Array's are not merging and can't fetch more items in frontend?

Actual outcome:

Now when I inspect console and the frontend, the incoming and existing arrays are not merging?

existing array is always empty (after fetching more items)?

I don't have an id field to use on the GetNodes query.

Whats wrong here?

Versions
System:
OS: macOS 11.6.1
Binaries:
Node: 12.19.0 - ~/.nvm/versions/node/v12.19.0/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v12.19.0/bin/npm
Browsers:
Chrome: 97.0.4692.71
Firefox: 95.0.2
Safari: 15.2
npmPackages:
@apollo/client: ^3.3.19 => 3.3.19

[phreeek]

Hi, I have the same problem, did you find a solution? thanks

[david-yappeter]

source: https://stackoverflow.com/questions/65679707/in-apollo-client-pagination-configuration-with-merge-function-existing-cached/70309696#70309696

Maybe you can try to change keyFields: false to keyFields: [], this solve my problem with existing undefined.

new InMemoryCache({
  typePolicies: {
    GetNodes: {
      keyFields: [], // <- this
      fields: {
        nodes: {
          keyArgs: false, // I always set this to false, following the doc, but didn't know what it does
          merge(existing = [], incoming: unknown[]) {
            console.log('Existing', existing);
            console.log('Incoming', incoming);
            return [...existing, ...incoming];
          },
        },
      },
  },
})

[gupta-ji6]

keyArgs: false, // I always set this to false, following the doc, but didn't know what it does

@david-yappeter - Specifying keyFields: false in a type policy disables normalization for that type, so your GetNodes objects will not be normalized at all, but will be stored directly as values (not References) under their parent fields.

(found it here, so thought of sharing here)