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

Help
,
1

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:

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 where I did the following:

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

created codegen.yml:

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:

{
  "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:

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:

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

And now when I run the query with:

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!

1 Like