How do I set up InstrospectionFragmentMatcher with Apollo 1.4 (React)?

My GraphQL endpoint has just had a UnionType added. Apollo gives an error during a query for one such field:

You are using the simple (heuristic) fragment matcher, but your queries contain union or interface types.

Apollo Client will not be able to able to accurately map fragments.To make this error go away, use the IntrospectionFragmentMatcher as described in the docs: http://dev.apollodata.com/react/initialization.html#fragment-matcher

There are then a lot of “missing field” warnings.

I read the documentation linked to, but it appears to be for apollo-client 2 rather than 1, and so when it says “You’ll want to do this in the same file where you initialize the cache for Apollo Client” I say “what cache?”

My Apollo configuration before wanting to use the IntrospectionFragmentMatcher looked like this:

import {ApolloClient, createNetworkInterface} from 'react-apollo';

const networkInterface = createNetworkInterface({
  uri: process.env.API_URL + '/graphql',
});

networkInterface.use([{
  applyMiddleware: (req, next) => {
    // ...
  },
}]);

const graphqlClient = new ApolloClient({
  dataIdFromObject: o => o.hashid,
  networkInterface: networkInterface,
});

export default graphqlClient;

After attempting to blunder through the instructions anyway (and installing apollo-cache-inmemory, which I did not already have) I end up with this:

import {ApolloClient, createNetworkInterface} from 'react-apollo';
import Cache, {IntrospectionFragmentMatcher} from 'apollo-cache-inmemory';

const PARTIAL_SCHEMA = {
  __schema: {
    // ... (I'm hardcoding this for now)
  },
};

const networkInterface = createNetworkInterface({
  uri: process.env.API_URL + '/graphql',
});

networkInterface.use([{
  applyMiddleware: (req, next) => {
    // ...
  },
}]);

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData: PARTIAL_SCHEMA,
});

const cache = new Cache({fragmentMatcher});

const graphqlClient = new ApolloClient({
  cache: cache,
  dataIdFromObject: o => o.hashid,
  networkInterface: networkInterface,
});

export default graphqlClient;

Which gives me

TypeError: _apolloCacheInmemory2.default is not a constructor

I looked at the docs for apollo-cache-inmemory and it describes the setup procedure differently. After trying to shoehorn that into my configuration I have ended up with this:

import {ApolloClient, createNetworkInterface} from 'react-apollo';
import {InMemoryCache, IntrospectionFragmentMatcher} from 'apollo-cache-inmemory';

const PARTIAL_SCHEMA = {
  __schema: {
    // ...
  },
};

const networkInterface = createNetworkInterface({
  uri: process.env.API_URL + '/graphql',
});

networkInterface.use([{
  applyMiddleware: (req, next) => {
    // ...
  },
}]);

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData: PARTIAL_SCHEMA,
});

const cache = new InMemoryCache({
  dataIdFromObject: o => o.hashid,
  fragmentMatcher: fragmentMatcher,
});

const graphqlClient = new ApolloClient({
  cache: cache,
  networkInterface: networkInterface,
});

export default graphqlClient;

This compiles and the site looks OK and queries run, but I’m back to exactly the same errors I started with.

How do I set this up?

Versions:

• apollo-client@1.4.0
• react-apollo@1.4.16

[tremby]

As I said earlier in the thread, I had lots of problems trying with 1.4 and so I upgraded to version 2. So no, I did not get it working with 1.4.

[cknabe]

For 1.4 react-apollo:

1. You MUST pull IntrospectionFragmentMatcher from ‘react-apollo’ not from apollo-cache-inmemory
2. As stated above, you MUST pass the fragment matcher directly to ApolloClient.

DO NOT USE apollo-cache-inmemory AT ALL for react-apollo 1.4

import { ApolloClient, IntrospectionFragmentMatcher } from 'react-apollo';

import introspectionQueryResultData from './fragmentTypes.json';

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData,
});

export default options => {
  return new ApolloClient(
      { fragmentMatcher },
    ),
  );
};

I lost a lot of time to this. Upgrading to 2/3 is not considered a priority, and thus there are no cycles to devote to it. Posting here, as I stumbled upon this issue over and over while searching for help.