Getting an error when having heuristic fragment matching with Apollo & Nuxt.js

Question

I am trying to connect the below graphql query with nuxtjs.

query getContent($slug: String!) {
  contents (filters: { slug: { eq: $slug } }) {
    data {
      id
      attributes {
        title
        content {
          __typename
          ... on ComponentContentParagraph {
                content
            }
        }
      }
    }
  }
}

I am getting the following error and not getting the result from the query.

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

I have checked the questions and answers available here.

Apollo+GraphQL - Heuristic Fragment Manual Matching

I have followed the docs from apollo as well.

https://www.apollographql.com/docs/react/data/fragments/#fragment-matcher

I managed to generate possibleTypes as mentioned in the docs.

Here is my next config.

  apollo: {
    includeNodeModules: true,
    clientConfigs: {
      default: "~/graphql/default.js",
    },
  },

This is the default.js

import { InMemoryCache } from "apollo-cache-inmemory";
import possibleTypes from "./possibleTypes.json";

export default () => {
  return {
    httpEndpoint: process.env.BACKEND_URL || "http://localhost:1337/graphql",
    cache: new InMemoryCache({ possibleTypes }),
  };
};

I am using strapi for the backend and this query works fine when running from graphql interface.