title: How to fix or query heuristic fragments in Strapi + React + Apollo
body: <p>I'm building a site using Strapi and React. When I query the data using the graphql playground I am able to see the data that is returned, however in my frontend using apollo, I get this error:</p>
  
  <blockquote>
    <p>index.js:1 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 <code>IntrospectionFragmentMatcher</code> as described in the docs:
    <a href="https://www.apollographql.com/docs/react/advanced/fragments.html#fragment-matcher" rel="nofollow noreferrer">https://www.apollographql.com/docs/react/advanced/fragments.html#fragment-matcher</a></p>
  </blockquote>
  
  <p>and</p>
  
  <blockquote>
    <p>index.js:1 WARNING: heuristic fragment matching going on!</p>
  </blockquote>
  
  <p>the URL for the docs doesn't work and after google the error, every answer is quite out of the scope for the knowledge I have.</p>
  
  <p>This is the query in my graphql playground:</p>
  
  <pre><code>      {
          page(id: 1) {
            slug
            id
            title
            body {
              __typename
              ... on ComponentContentText {
                id
                body
              }
              __typename
              ... on ComponentContentButton {
                id
                linkUrl
              }
            }
          }
        }
  </code></pre>
  
  <p>here is the result:</p>
  
  <pre><code>{
    "data": {
      "page": {
        "slug": "home",
        "id": "1",
        "title": "Home",
        "body": [
          {
            "__typename": "ComponentContentText",
            "id": "1",
            "body": "# Lorem Ipsum!\n\nLorem Ipsum dolor..."
          },
          {
            "__typename": "ComponentContentButton",
            "id": "1",
            "linkUrl": "how-it-works"
          },
          {
            "__typename": "ComponentContentButton",
            "id": "3",
            "linkUrl": "about"
          },
          {
            "__typename": "ComponentContentText",
            "id": "2",
            "body": "## Lorem Ipsum dolor"
          },
          {
            "__typename": "ComponentContentText",
            "id": "3",
            "body": "Lorem Ipsum dolor..."
          },
          {
            "__typename": "ComponentContentButton",
            "id": "2",
            "linkUrl": "contact"
          }
        ]
      }
    }
  }
  </code></pre>
  
  <p>and this is my component in react:</p>
  
  <pre><code>import React from 'react';
  import { Query } from 'react-apollo';
  import gql from 'graphql-tag';
  //import ReactMarkdown from 'react-markdown';
  
  const Page = () =&gt; (
    &lt;Query
      query={gql`
        {
          page(id: 1) {
            slug
            id
            title
            body {
              __typename
              ... on ComponentContentText {
                id
                body
              }
              __typename
              ... on ComponentContentButton {
                id
                linkUrl
              }
            }
          }
        }
      `}
    &gt;
      {({ loading, error, data }) =&gt; {
        if (loading) return &lt;p className='loading'&gt;loading&lt;/p&gt;;
        if (error) return &lt;p className='error'&gt;error: {JSON.stringify(error)}&lt;/p&gt;;
        //return &lt;ReactMarkdown source={data} /&gt;;
      }}
    &lt;/Query&gt;
  );
  
  export default Page;
  </code></pre>
  
  <p>As I am quite new on this, I would like to know and understand how to return this data.</p>
  
  <p>Thanks!</p>