# It's a rough start, now I have the famous heuristic fragment error

**URL:** <https://community.apollographql.com/t/its-a-rough-start-now-i-have-the-famous-heuristic-fragment-error/4647>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [September 30, 2022, 7:59pm UTC](https://community.apollographql.com/t/its-a-rough-start-now-i-have-the-famous-heuristic-fragment-error/4647 "2022-09-30T19:59:28Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![boriskamp](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/boriskamp/32/3149_2.png) [@boriskamp](https://community.apollographql.com/u/boriskamp)\
**Post date:** [September 30, 2022, 7:59pm UTC](https://community.apollographql.com/t/its-a-rough-start-now-i-have-the-famous-heuristic-fragment-error/4647/1 "2022-09-30T19:59:28Z")

</div>

Hi all!

So here I am, trying out my first project with GraphQL.  
I use NuxtJS and Strapi and use Strapi’s GraphQL API.

I’ve been on this for days while going around the internet looking for problems. after bumping into several roadblocks and luckily solving them with the help of the internet, I’ve now bumped into one I cannot seem to get a solution to myself.

So I have the following simple query:

```auto
query data($locale: I18NLocaleCode! = "nl") {
  homePage(locale: $locale) {
    data {
      attributes {
        content_sections{
        	__typename
          ... on ComponentContentSectionsTwoBlockChoice {
            id
          }
        }
      }
    }
  }
}

```

Just for the sakes of getting it to work, after that I’ll extend it.  
I’ve followed [this tutorial on the Strapi site](https://strapi.io/blog/creating-strapi-dynamic-zone-in-nuxtjs-app) where I did the following:

ran `yarn add -D @graphql-codegen/cli` and `yarn add -D @graphql-codegen/fragment-matcher`.

created `codegen.yml`:

```auto
overwrite: true
schema: "http://127.0.0.1:1337/graphql"
generates:
  ./fragmentTypes.json:
    plugins:
      - "fragment-matcher"

```

Added the `gen` script to my `package.json`: `"gen": "graphql-codegen"`  
and fired `npm run gen` which generates the `fragmentTypes.json` file with the following content:

```json
{
  "possibleTypes": {
    "GenericMorph": [
      "ComponentContentSectionsContentSections",
      "ComponentContentSectionsTwoBlockChoice",
      "ComponentMenuMenu",
      "ComponentPageComponentsCtaButton",
      "ComponentPageComponentsJumbotron",
      "ComponentPageComponentsTextImage",
      "ComponentPageComponentsTwoBlockChoice",
      "ComponentSettingsContact",
      "ComponentSettingsContentSections",
      "HomePage",
      "I18NLocale",
      "Menu",
      "Page",
      "Setting",
      "UploadFile",
      "UploadFolder",
      "UsersPermissionsPermission",
      "UsersPermissionsRole",
      "UsersPermissionsUser"
    ],
    "HomePageContentSectionsDynamicZone": [
      "ComponentContentSectionsContentSections",
      "ComponentContentSectionsTwoBlockChoice",
      "Error"
    ]
  }
}

```

I then created a `config.js` file in `~/graphql/` with the following content:

```js
import {
  InMemoryCache,
  IntrospectionFragmentMatcher,
} from 'apollo-cache-inmemory'
import introspectionResult from '~/fragmentTypes.json'

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData: introspectionResult,
})
export default ({ req, app }) => {
  return {
    httpEndpoint:
      process.env.STRAPI_GRAPHQL_URL || 'http://localhost:1337/graphql',
    cache: new InMemoryCache({ fragmentMatcher }),
  }
}

```

And finally added this to my `nuxt.config.js` file:

```js
  apollo: {
    clientConfigs: {
      default: '@/graphql/config.js',
    },
  },

```

And now when I run the query with:

```js
apollo: {
    data: {
      query: homeQuery,
      variables() {
        return {
          locale: this.$i18n.locale,
        }
      },
      update(data) {
        return data.homePage.data
      },
    },
  },

```

I get the following error:  
`Cannot read property 'types' of undefined`  
referring to line `120` in `node_modules/apollo-cache-inmemory/lib/bundle.cjs.js`:  
`introspectionResultData.__schema.types.forEach(function (type) {`

I get what this is saying, `introspectionResultData` is probably `null` or something, but I’m not capable of solving this…

Does anybody have a clue?

Thanks!