How to fix or query heuristic fragments in Strapi + React + Apollo

Question

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:

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 IntrospectionFragmentMatcher as described in the docs: https://www.apollographql.com/docs/react/advanced/fragments.html#fragment-matcher

and

index.js:1 WARNING: heuristic fragment matching going on!

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.

This is the query in my graphql playground:

      {
        page(id: 1) {
          slug
          id
          title
          body {
            __typename
            ... on ComponentContentText {
              id
              body
            }
            __typename
            ... on ComponentContentButton {
              id
              linkUrl
            }
          }
        }
      }

here is the result:

{
  "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"
        }
      ]
    }
  }
}

and this is my component in react:

import React from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';
//import ReactMarkdown from 'react-markdown';

const Page = () => (
  <Query
    query={gql`
      {
        page(id: 1) {
          slug
          id
          title
          body {
            __typename
            ... on ComponentContentText {
              id
              body
            }
            __typename
            ... on ComponentContentButton {
              id
              linkUrl
            }
          }
        }
      }
    `}
  >
    {({ loading, error, data }) => {
      if (loading) return <p className='loading'>loading</p>;
      if (error) return <p className='error'>error: {JSON.stringify(error)}</p>;
      //return <ReactMarkdown source={data} />;
    }}
  </Query>
);

export default Page;

As I am quite new on this, I would like to know and understand how to return this data.

Thanks!

Michael Michael · Accepted Answer · 2020-05-25T00:49:03

You can read about fragments in Apollo GraphQL here. For a newbie with Apollo GraphQL, I recommend you using useQuery rather than Query component which will not be supported in Apollo 3.0 here. You can read more in my answer here.

How to fix or query heuristic fragments in Strapi + React + Apollo

1 Answers