WARNING: heuristic fragment matching going on!

Help
1

I am working on a Nuxt site, and am trying to use Apollo to query data from Contentful. I am able to generally do so for BASIC requests, like so:

query generalPageCollectionQuery($preview: Boolean!) {
  generalPageCollection(
    order: [sys_firstPublishedAt_DESC, sys_id_DESC]
    preview: $preview
  ) {
    items {
      title
      slug
    }
  }
}

The above works fine; I get back the title and slug for all of my pages, so I can link to them. Great!

However, the below does NOT work out of the box, and returns an error (WARNING: heuristic fragment matching going on!):

query generalPageCollectionQuery($preview: Boolean!, $slug: String!) {
  generalPageCollection(preview: $preview, where: { slug: $slug }) {
    items {
      title
      bodyModulesCollection {
        items {
          __typename,
          ... on Paragraph {
            paragraph
          },
          ... on Image {
            image {
              url
            }
          }
        }
      }
    }
  }
}

I’ll note that I am not coming STRAIGHT here upon seeing this error. I’ve searched the internet, read the docs, and am still unable to get it to function as expected. I understand WHY it doesn’t work (Apollo doesn’t know what possibleTypes exist for my schema, cool), but I don’t understand HOW to get it working.

I have a repo here where I am working on this, a very simple bare-bones site through which I am trying to create a skeleton upon which to build an actual site (specific branch link below):

Any guidance at all would be hugely appreciated; I am trying to determine whether I can/should use Apollo + Nuxt for my next big project and this is my only blocker at this time.

2

@DouglasKGlover we’ve greatly simplified the way fragment matching and possibleTypes work in Apollo Client 3. From the above error message however, it sounds like you’re using Apollo Client 2. I definitely recommend trying the new possibleTypes approach in @apollo/client >= 3.

3

Sounds then like I am at the mercy (relatively) of the Nuxt module I’m using: GitHub - nuxt-community/apollo-module: Nuxt.js module to use Vue-Apollo. The Apollo integration for GraphQL.

Perhaps I am confused; frankly it feels like there are a few steps between my own code and the apollo client itself. I want to use this in a SSG (Nuxt) and am not sure if I can literally just go straight to the source as it were and install just the apollo client and still have it work at build time (rather than client-side) without significant manual setup on my end.

I suppose I’ll have to look into it, but it just seems odd to have to wire it all up from scratch myself considering. Obviously that becomes a “module I’m using” problem, not an Apollo problem, so unless you have any guidance that you’d be able to provide I guess I’ll have to start looking into how I might upgrade to v3 myself.

Basically every guide online featuring Nuxt + Graphql leads you to the @nuxtjs/apollo module, and not a single one of them goes anywhere beyond the most basic use case (i.e. nobody uses unions in their queries). I’m venting at this point lol, but it’s like the whole system is supposed to make it easier, but everything is always outdated. (again, realize this is not your fault)

4

@hwillson Hey again. I am perhaps a bit confused. Looking into the package-lock.json file of the Nuxt/Apollo module I’m using, it looks to be using the following:

"@apollo/client": {
      "version": "3.3.19",
      ...

Is it possible I’ve done something wrong? I’m not sure why I’d get a v2 error if the NPM module I’ve pulled in is using the latest. Any guidance or even direction on where I might go to get some assistance would be great.

5

@DouglasKGlover can you share the output of running npm ls @apollo/client in your app root?

6

@hwillson - I’m confused how it got here, but it seems that despite installing the module for nuxt-apollo, I also had to run npm i to install its dependencies. I’ve not had to do that with other things before (right after installing them). Looks like that’s on me I guess. Here’s the output I got after doing as suggested:

$ npm ls @apollo/client
nuxt-app-1@1.0.0 D:\[folder-path]\nuxt-app-1
`-- UNMET DEPENDENCY @nuxtjs/apollo@4.0.1-rc.5
  `-- UNMET DEPENDENCY vue-cli-plugin-apollo@0.22.2
    `-- UNMET DEPENDENCY graphql-tools@6.2.6
      `-- UNMET DEPENDENCY @graphql-tools/links@6.2.5
        `-- UNMET DEPENDENCY apollo-upload-client@14.1.2
          `-- UNMET DEPENDENCY @apollo/client@3.3.19

npm ERR! missing: @nuxtjs/apollo@4.0.1-rc.5, required by nuxt-app-1@1.0.0
npm ERR! missing: vue-cli-plugin-apollo@0.22.2, required by @nuxtjs/apollo@4.0.1-rc.5
npm ERR! missing: graphql-tools@6.2.6, required by vue-cli-plugin-apollo@0.22.2
npm ERR! missing: @graphql-tools/links@6.2.5, required by graphql-tools@6.2.6
npm ERR! missing: apollo-upload-client@14.1.2, required by @graphql-tools/links@6.2.5
npm ERR! missing: @apollo/client@3.3.19, required by apollo-upload-client@14.1.2

And here’s after doing (another) npm i:

$ npm ls @apollo/client
nuxt-app-1@1.0.0 D:\[folder-path]\nuxt-app-1
`-- @nuxtjs/apollo@4.0.1-rc.5
  `-- vue-cli-plugin-apollo@0.22.2
    `-- graphql-tools@6.2.6
      `-- @graphql-tools/links@6.2.5
        `-- apollo-upload-client@14.1.2
          `-- @apollo/client@3.3.19

It’s not outright resolved the issue, but perhaps that was part of the problem.

It’s possible also that the unmet dependencies were due to my hopping between branches, and removing nuxt-apollo on another branch (it’s been a hot minute, trying out different methods). So I could be back to just where I was previously, but at the least the apollo client does look to be returning the proper release in my ls.