relayStyleConnection: Cannot read property 'edges' of undefined in all versions >= v3.3.0

Intended outcome: After upgrading from 3.2.x to 3.3.x, pages load correctly without error.

Actual outcome: We’ve been stuck on 3.2.x for the last several months due to this error when loading pages that use connections with relayStyleConnection-based type policies:

TypeError: Cannot read property 'edges' of undefined
    at merge (webpack-internal:///./node_modules/@apollo/client/utilities/utilities.cjs.js:704:45)
    at Policies.runMergeFunction (webpack-internal:///./node_modules/@apollo/client/cache/cache.cjs.js:1299:20)
    at StoreWriter.applyMerges (webpack-internal:///./node_modules/@apollo/client/cache/cache.cjs.js:880:40)
    at eval (webpack-internal:///./node_modules/@apollo/client/cache/cache.cjs.js:863:34)
    at Map.forEach (<anonymous>)
    at StoreWriter.applyMerges (webpack-internal:///./node_modules/@apollo/client/cache/cache.cjs.js:860:27)
    at StoreWriter.processSelectionSet (webpack-internal:///./node_modules/@apollo/client/cache/cache.cjs.js:812:39)
    at StoreWriter.processFieldValue (webpack-internal:///./node_modules/@apollo/client/cache/cache.cjs.js:839:21)
    at eval (webpack-internal:///./node_modules/@apollo/client/cache/cache.cjs.js:782:47)
    at Set.forEach (<anonymous>)
    at StoreWriter.processSelectionSet (webpack-internal:///./node_modules/@apollo/client/cache/cache.cjs.js:767:17)
    at StoreWriter.processFieldValue (webpack-internal:///./node_modules/@apollo/client/cache/cache.cjs.js:839:21)
    at eval (webpack-internal:///./node_modules/@apollo/client/cache/cache.cjs.js:782:47)
    at Set.forEach (<anonymous>)
    at StoreWriter.processSelectionSet (webpack-internal:///./node_modules/@apollo/client/cache/cache.cjs.js:767:17)

These errors, I think, are related to merging of connections with relayStyleConnection type policies. existing will look fine, something like:

{
  __typename: 'FooConnection',
  edges: [
    {
      __typename: 'FooEdge',
      cursor: 'MzkzNjc2M45DE3ODYw',
      node: [Object]
    }
  ],
  pageInfo: {
    __typename: 'PageInfo',
    startCursor: 'MzkzNjc45DE3ODYw',
    endCursor: 'MzkzADMjI4MjE3Yw',
    hasNextPage: false,
    hasPreviousPage: false
  }
}

And incoming will be undefined (and of course then incoming.edges is not defined).

How to reproduce the issue: I cannot get a perfect isolated reproduction here, but I did bisect to a commit: https://github.com/apollographql/apollo-client/commit/8172159e7033d195b5dd7747ecb54c8b437a0df9

These errors only throw with relayStyleConnection. The point in the code this throws at is: https://github.com/apollographql/apollo-client/blob/main/src/utilities/policies/pagination.ts#L130

Versions Every version after and including 3.3.0-beta.4.

[benjamn]

@SirensOfTitan First of all, thanks for surfacing this issue instead of continuing to suffer in silence, and thanks for going to the trouble of bisecting it.

Do you have any other type or field policies defined where the relayStylePagination() policy is used? For example, are there any merge: true configurations for the field that holds this FooConnection object, or any places where you use the mergeObjects helper function in a field merge function?

It’s very strange to me that incoming should ever be undefined, so if we can figure out why that happens, that’s likely to be the/a bug.

[benjamn]

Fix incoming, based on @bubba’s PR #7949 (and incorporating @migueloller’s code above): #8733

@SirensOfTitan Please take a look, and sorry for the wait!

@migueloller I’m optimistic that the {existing,incoming}.{edges,pageInfo} == null checking is not really necessary, since those properties are checked for truthiness before they’re used, but please feel free to comment on #8733 if you think additional changes are needed.