如何修复或查询 Strapi + React + Apollo 中的启发式片段

Question

我正在使用 Strapi 和 React 构建网站。当我使用 graphql playground 查询数据时，我能够看到 returned 的数据，但是在我使用 apollo 的前端中，我收到此错误：

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

和

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

文档的 URL 不起作用，在 google 错误之后，每个答案都超出了我的知识范围。

这是我的 graphql playground 中的查询：

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

结果如下：

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

这是我的反应组件：

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;

由于我对此很陌生，我想知道并了解如何 return 此数据。

谢谢！

Answer 1

您可以阅读 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 。

如何修复或查询 Strapi + React + Apollo 中的启发式片段

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

apollo

reactjs

graphql

strapi