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

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!

Answer 1

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.