Apollo+GraphQL - Heuristic Fragment Manual Matching

Question

I have a headless Craft CMS that is returning data to my Nuxtjs app through a GraphQL endpoint through Apollo. I have a field that can return one of three different block types: richText, image, and pullQuote.

My GraphQL endpoint looks like this:

query($section:[String], $slug:[String]) {
    entries(section: $section, slug: $slug) {
        id,
        title,
        uri,
        ... on blog_blog_Entry{
            contentEngine{
                __typename,
                ...on contentEngine_richText_BlockType{
                    __typename,
                    id,
                    richText
                    fontColor,
                    backgroundColor
                }
                ...on contentEngine_image_BlockType{
                    __typename,
                    id,
                    backgroundColor,
                    imageWidth,
                    image {
                        id,
                        url
                    }
                }
                ...on contentEngine_pullQuote_BlockType{
                    __typename,
                    id,
                    backgroundColor,
                    fontColor,
                    quote
                }
            }
        }
    }
}

It returns data just fine, but I'm getting this error when trying to use it within my Nuxt component:

You are using the simple (heuristic) fragment matcher, but your queries contain union or interface types. Apollo Client will not be able to accurately map fragments. To make this error go away, use the IntrospectionFragmentMatcher as described in the docs: https://www.apollographql.com/docs/react/advanced/fragments.html#fragment-matcher

The infuriating thing is that this documentation leads to a 404. I've found a few other GitHub tickets that reference this link, so I'm not sure what steps I should be following.

I think what I need to do is to teach Apollo's memory cache. Since my response isn't that complicated, I think I can get away with Defining PossibleTypes manually.

I've tried the following, but I don't think I'm understanding how to set this up properly:

const cache = new InMemoryCache({
    possibleTypes: {
        contentEngine: [
            "contentEngine_richText_BlockType", 
            "contentEngine_pullQuote_BlockType", 
            "contentEngine_image_BlockType"
        ],
    },
});

Any help for getting around this issue would be a huge help.

WARNING: heuristic fragment matching going on!

Answer 1

As the documentation states, using possibleTypes is only possible if using apollo-client version 3.0 or higher, which is currently in beta. Unless you're using the @apollo/client package as shown here, passing in the possibleTypes parameter will do nothing.

Additionally, you need to make sure each property in the object you pass in is the name of a union or interface, not the name of a field. From the docs

You can pass a possibleTypes option to the InMemoryCache constructor to specify supertype-subtype relationships in your schema. This object maps the name of an interface or union type (the supertype) to the types that implement or belong to it (the subtypes).

In other words, instead of using contentEngine as the key, you would use whatever the name of type of the contentEngine field was.

If you're using an earlier version of apollo-client, you'll need to create an IntrospectionFragmentMatcher as outlined in the docs here.