TypeError: possibleTypes[supertype].forEach is not a function

Question

This my code.

import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
import { createHttpLink } from "apollo-link-http";
import { render } from "react-dom";
import React from "react";

import RouteCollector from "./routeCollector";

import "./index.css";
import possibleTypes from "./tools/graphqlCodeGenerator/possibleTypes.json";

const cache = new InMemoryCache({
  possibleTypes,
});

const link = createHttpLink({
  uri: "http://localhost:8000/graphql",
  credentials: "include",
});

const client = new ApolloClient({
  cache,
  link,
});

render(
  <ApolloProvider client={client}>
    <RouteCollector />
  </ApolloProvider>,
  document.getElementById("root")
);

I am using the packages " @ apollo / client ":" ^ 3.0.2 ", "apollo-link-http": "^1.5.17", "graphql": "^15.3.0","react": "^16.13.1",

when I run the program I get the error

TypeError: possibleTypes[supertype].forEach is not a function

How to fix the error ?

Answer 1

If you're using GraphQL Code Generator, you should make sure you're using the possibleTypes property of the object generated by the fragment-matcher plugin, like this:

import introspectionResult from '../introspection-result';

const cache = new InMemoryCache({
  possibleTypes: introspectionResult.possibleTypes,
});

You can't pass the entire object that's generated.

You also need to make sure you're setting apolloClientVersion to 3 in your codegen config to ensure you're generating the correct object.