Apollo / graphQL WARNING: heuristic fragment matching going on!

Developing with Prismic
1

I am having an issue with slices (in a custom doc) in my graphQL queries where I get this warning WARNING: heuristic fragment matching going on!. I am following the Prismic example here (Query Data with GraphQL - Prismic) and my query looks like this:

query {
          about_page(lang: "en-us", uid: "about") {
            about_ssb_content
            about_ssb_heading
            about_ssb_image
            body {
              ... on About_pageBodyFooter_cta {
                footer_cta: fields {
                  image
                  heading
                  button_text
                  button_link
                }
              }
              ... on About_pageBodyFullwidth_info_block {
                fullwidth_info_block: fields {
                  image
                  heading
                  cta_text
                  cta_link
                  cta_type
                  description
                }
              }
            }
            footer_heading
            footer_image
            footer_link
            footer_link_text
            hero_content_left
            hero_content_right
            hero_heading
            hero_image
            safety_accordion {
              content_left
              content_right
              label
            }
            safety_content
            safety_heading
            timeline_item {
              content
              image
              year
            }
          }
        }

When I include the slices About_pageBodyFooter_cta and/or About_pageBodyFullwidth_info_block I get the warning and the query doesn't work.

I found this and tried it: Heuristic Fragment matcher warning! How to fix it? | by Chandan Reddy | Commutatus
but I donā€™t think I will be able to ā€œPOSTā€ so I might be at a dead end with this.

Any ideas??

4

Hi.

Iā€™ll be happy to try and help with this.

Although I donā€™t understand what youā€™re doing in this part with footer_cta: fields

footer_cta: fields {
  image
  heading
  button_text
  button_link
}

That might be the issue. Can you try removing footer_cta:?

Thanks.

5

Thanks for your help!

I was aliasing those (footer_cta and fullwidth_info_block) as they both have a header which conflict. Something I didnā€™t mention in my initial question is this query works in the GraphiQL interface.

When I remove the footer_cta: it works in GraphiQL but in my project I get

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
WARNING: heuristic fragment matching going on!
Missing field fields in {
  "fullwidth_info_block": [
    {
      "image": {
        "dimensions": {
          "width": 386,
WARNING: heuristic fragment matching going on!
Missing field fullwidth_info_block in {
  "fields": [
    {
      "image": {
        "dimensions": {
          "width": 277,
          "he

So then I removed the fullwidth_info_block: and the conflicting header from that query and get

Missing field button_text in {
  "image": {
    "dimensions": {
      "width": 386,
      "height": 268
    },
    "alt": null,
 
Missing field button_link in {
  "image": {
    "dimensions": {
      "width": 386,
      "height": 268
    },
    "alt": null,
 
WARNING: heuristic fragment matching going on!
Missing field cta_text in {
  "image": {
    "dimensions": {
      "width": 277,
      "height": 150
    },
    "alt": "Serta 
Missing field cta_link in {
  "image": {
    "dimensions": {
      "width": 277,
      "height": 150
    },
    "alt": "Serta 
Missing field cta_type in {
  "image": {
    "dimensions": {
      "width": 277,
      "height": 150
    },
    "alt": "Serta 
Missing field description in {
  "image": {
    "dimensions": {
      "width": 277,
      "height": 150
    },

Next I tried removing this section of the query

                fullwidth_info_block: fields {
                  image
                  heading
                  cta_text
                  cta_link
                  cta_type
                  description
                }
              }

resulting in this query

{
          about_page(lang: "en-us", uid: "about") {
            about_ssb_content
            about_ssb_heading
            about_ssb_image
            body {
              ... on About_pageBodyFooter_cta {
                fields {
                  image
                  button_text
                  button_link
                }
              }
            }
            footer_heading
            footer_image
            footer_link
            footer_link_text
            hero_content_left
            hero_content_right
            hero_heading
            hero_image
            safety_accordion {
              content_left
              content_right
              label
            }
            safety_content
            safety_heading
            timeline_item {
              content
              image
              year
            }
          }
        }

That gives me this error:

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
WARNING: heuristic fragment matching going on!
Missing field fields in {
  "__typename": "About_pageBodyFullwidth_info_block"
}

I am kinda stumped especially since this seems to work fine in GraphiQL.

Thoughts??

6

Ok I found a fix for this. It seems to be a bug in the apollo-link-prismic package. Many thanks to https://github.com/codingwithchris

8

I'm glad you figured it out. I was stumped too :sweat_smile:

I'll forward this to the @Prismic-Dev-Team team to make them aware.

1 Like