Apollo / graphQL WARNING: heuristic fragment matching going on!

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??