Modular Content - heuristic fragment matching error

🆘 Support
1

When using the modular content features with Nuxt + Apollo i get console errors ‘heuristic fragment matching going on’. The page renders fine locally despite the errors, and the errors go away on the Netlify dev site, but the SSG has failed to work and if I view the page with javaScript disabled, the page is blank.

Is there an extra step required which would fix the errors and allow the static site version to generate correctly?

Example dev site page

Following the docs here

I’m using modular content to create a ‘page builder’ type app with a structure like this

contentArea
    tileList
    sectionHeading
    banner
    hero
    video
    layoutRow
        sectionHeading
        banner
        contentEditor
        video

The whole error looks like this and I get one error for each value I reference

WARNING: heuristic fragment matching going on!
eval @ client.js?06a0:57
eval @ client.js?06a0:57
eval @ client.js:1302
./.nuxt/client.js @ app.js:47
__webpack_require__ @ runtime.js:854
fn @ runtime.js:151
0 @ app.js:4089
__webpack_require__ @ runtime.js:854
checkDeferredModules @ runtime.js:46
webpackJsonpCallback @ runtime.js:33
(anonymous) @ app.js:1
client.js?06a0:57 Missing field heroImage in {
  "_modelApiKey": "tile_list",
  "bigTiles": true,
  "cardView": false,
  "discImages": false,
  "
3

Hello @jacktcunningham_publisher

This is an Apollo problem, more specifically for when it doesn’t have access to the graphQL schema, and therefore can’t map the fragments accordingly.

Here is an article on how to deal with it directly, that i think can be very helpful on your case.

Also, the Apollo documentation for fragments can help you understand a little better where the problem comes from

4

Hi @m.finamor, this is solved

If this helps any other nuxt.js users, it was resolved with a relatively simple fix

As you suggested you need to provide a graphql schema. As per @papertokyo 's post here

I set up the cache in nuxt.js+Apollo by referencing it in my apollo/config.js

import cache from './cache'

export default ({ env }) => {
    return {
        httpEndpoint: env.xxxxx,
        getAuth:() =>  env.xxxxx,
        cache
    }
}

and adding this cache.js file alongside

import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
import introspectionQueryResultData from './fragmentTypes.json'

const fragmentMatcher = new IntrospectionFragmentMatcher({
    introspectionQueryResultData
})

export default new InMemoryCache({ fragmentMatcher })

The strange thing is, as per others on the above thread, just providing a blank schema resolves all of the console warnings and has restored SSG to all of the pages that used modular content. So now if I browse with JS disabled I see the content in the src. Also confirmed by my build times in Netlify jumping up from 2 to 5 mins.
So my fragmentTypes.json file looks like this

{
    "__schema": {
        "types": [
        ]
    }
}

I suspect this will come back and bite me at some point but for now I’m going with it : )

1 Like
5

Hello @jacktcunningham_publisher

Glad to know it is working!

But as you said, this solution could lead to some pretty big problems for you in the future.
You can populate your fragmentTypes.json with some automatic graphQL schema generators, the methods to generate this file populated accordingly to your GraphQL schema are discussed a bit here: Using fragments - Client (React) - Apollo GraphQL Docs