Apollo-client: InMemoryCache 3.0 Migration issue: possibleTypes[supertype].forEach

[Antonio-Laguna]

Intended outcome:

InMemoryCache should just work with the instructions provided here

Actual outcome:

Debug: internal, implementation, error
    TypeError: possibleTypes[supertype].forEach is not a function
    at /usr/src/app/node_modules/@apollo/client/cache/inmemory/policies.js:148:38
    at Array.forEach (<anonymous>)
    at Policies.addPossibleTypes (/usr/src/app/node_modules/@apollo/client/cache/inmemory/policies.js:146:36)
    at new Policies (/usr/src/app/node_modules/@apollo/client/cache/inmemory/policies.js:49:18)
    at new InMemoryCache (/usr/src/app/node_modules/@apollo/client/cache/inmemory/inMemoryCache.js:41:26)
    at CreateClient (/usr/src/app/server/modules/client.js:84:17)
    at handler (/usr/src/app/server/routes/react.jsx:34:26)
    at exports.Manager.execute (/usr/src/app/node_modules/@hapi/hapi/lib/toolkit.js:57:29)
    at Object.internals.handler (/usr/src/app/node_modules/@hapi/hapi/lib/handler.js:46:48)
    at exports.execute (/usr/src/app/node_modules/@hapi/hapi/lib/handler.js:31:36)

How to reproduce the issue:

I'm just using like:

import possibleTypes from './fragmentTypes.json';

const cache = new InMemoryCache({ possibleTypes });

return new ApolloClient({
  connectToDevTools: false,
  ssrMode: true,
  link: httpLink,
  cache,
  defaultOptions: {
    query: {
      fetchPolicy: 'no-cache' // we're doing manual caching
    }
  }
});

Versions

npx: installed 1 in 1.327s

  System:
    OS: macOS 10.15.6
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    npm: 6.14.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.125
    Safari: 13.1.2
  npmPackages:
    @apollo/client: ^3.1.3 => 3.1.3
    apollo-cache-inmemory: ^1.6.6 => 1.6.6
    apollo-cache-persist: ^0.1.1 => 0.1.1
    apollo-link-rest: ^0.8.0-beta.0 => 0.8.0-beta.0
    apollo-utilities: ^1.3.4 => 1.3.4

[benjamn]

Can you share (a sample of) the contents of that possibleTypes variable?

[Antonio-Laguna]

Sure:

{
  "__schema":{
    "types":[
      {
        "kind":"INTERFACE",
        "name":"Node",
        "possibleTypes":[
          {
            "name":"Artist"
          },
          {
            "name":"Post"
          },
          {
            "name":"Taxonomy"
          },
          {
            "name":"PostType"
          },
          {
            "name":"User"
          },
          {
            "name":"Category"
          },
          {
            "name":"MediaItem"
          },
          {
            "name":"Comment"
          },
          {
            "name":"CommentAuthor"
          },
          {
            "name":"Tag"
          },
          {
            "name":"Gallery"
          },
          {
            "name":"Revision"
          },
          {
            "name":"Page"
          },
          {
            "name":"Plugin"
          },
          {
            "name":"Theme"
          }
        ]
      },
      {
        "kind":"UNION",
        "name":"PostObjectUnion",
        "possibleTypes":[
          {
            "name":"Post"
          },
          {
            "name":"Page"
          },
          {
            "name":"MediaItem"
          },
          {
            "name":"Revision"
          },
          {
            "name":"Promo"
          },
          {
            "name":"CloseCall"
          },
          {
            "name":"Gallery"
          }
        ]
      },
      {
        "kind":"UNION",
        "name":"TermObjectUnion",
        "possibleTypes":[
          {
            "name":"Category"
          },
          {
            "name":"Tag"
          }
        ]
      },
      {
        "kind":"UNION",
        "name":"CommentAuthorUnion",
        "possibleTypes":[
          {
            "name":"User"
          },
          {
            "name":"CommentAuthor"
          }
        ]
      },
      {
        "kind":"UNION",
        "name":"PostFeedUnion",
        "possibleTypes":[
          {
            "name":"Post"
          },
          {
            "name":"Gallery"
          }
        ]
      },
      {
        "kind":"UNION",
        "name":"MenuItemObjectUnion",
        "possibleTypes":[
          {
            "name":"Post"
          },
          {
            "name":"Page"
          },
          {
            "name":"Promo"
          },
          {
            "name":"Gallery"
          },
          {
            "name":"Category"
          },
          {
            "name":"Tag"
          },
          {
            "name":"MenuItem"
          }
        ]
      },
      {
        "kind":"UNION",
        "name":"SearchFeedUnion",
        "possibleTypes":[
          {
            "name":"Post"
          },
          {
            "name":"Gallery"
          }
        ]
      }
    ]
  }
}

[Poky85]

@Antonio-Laguna Error occurs because in possibleTypes option you pass introspection query result directly instead of "possible types object". See docs here https://www.apollographql.com/docs/react/data/fragments/#generating-possibletypes-automatically, especially lines 27-32 of given script.

Personally I created following function

import { PossibleTypesMap } from '@apollo/client/cache'

/**
 * Extracts `PossibleTypesMap` as accepted by `@apollo/client` from GraphQL introspection query result
 */
const introspectionToPossibleTypes = (introspectionQueryResultData): PossibleTypesMap => {
  const possibleTypes = {}

  introspectionQueryResultData.__schema.types.forEach(supertype => {
    if (supertype.possibleTypes) {
      possibleTypes[supertype.name] = supertype.possibleTypes.map(subtype => subtype.name)
    }
  })

  return possibleTypes
}

export default introspectionToPossibleTypes

import { InMemoryCache } from '@apollo/client/cache'
import introspectionQueryResultData from './introspectionResult.json'

const cache = new InMemoryCache({
    …
    possibleTypes: introspectionToPossibleTypes(introspectionQueryResultData),
})

[benjamn]

@Poky85 beat me to it!

@Antonio-Laguna give that code a try?

[Antonio-Laguna]

Will do in a bit! My question then is, should this be clarified on the docs? I think I did exactly what the docs point.

[benjamn]

Were you reading the v3 docs? It sounds like you might have been following the 2.6 directions…

[Antonio-Laguna]

Maybe I wasn't for some reason! Thanks @benjamn and @Poky85 . Worked like a charm!