Question

我正在使用GitHub Graphql API，并使用react-apollo编写了以下代码，但是当我在许多请求之后分页时，控制台上就会出现以下错误。

您正在使用简单的（启发式）片段匹配器，但是您的查询包含联合或接口类型。 Apollo Client将无法准确映射片段。要使此错误消失，请按照文档中的说明使用IntrospectionFragmentMatcher：https://www.apollographql.com/docs/react/recipes/fragment-matching.html

。

警告：启发式片段匹配正在进行中！

。

{中缺少字段名称     “ __typename”：“组织”   }

{中缺少字段avatarUrl     “ __typename”：“组织”   }

{中缺少字段存储库     “ __typename”：“组织”   }

我写了以下代码：

gql`
  query($username: String!, $nextPage: String) {
    search(query: $username, type: USER, first: 100, after: $nextPage) {
      pageInfo {
        hasNextPage
        endCursor
      }
      edges {
        node {
          ... on User {
            name
            avatarUrl
            repositories {
              totalCount
            }
          }
        }
      }
    }
  }
`;


handleSubmit = ({ username }) => {
    const { client } = this.props;
    this.setState({
      loading: true,
      searchTerm: username,
    });
    client
      .query({
        query: SEARCH_USER,
        variables: {
          username
        }
      })
      .then(({ data }) => {
        this.setState({
          loading: false,
          searchList: data.search.edges,
          pagination: data.search.pageInfo,
        });
      })
      .catch(err => {
        console.warn(err);
      });
  };

Answer 1

因为Apollo没有足够的有关您的GraphQL模式的信息，您需要以某种方式提供它。阿波罗（Apollo）在该主题上有一个well written documentation。

它描述了使用脚本对您的GraphQL Server进行内部检查，以获取有关联合和接口的缺失信息。

为了使过程更加轻松，我为GraphQL Code Generator编写了一个插件，该插件可以自动完成所有操作。我建议阅读一章"Fragment Matcher"。

首先，手动解决方案或第二个解决方案都可以解决您的问题：）

Graphql react-apollo IntrospectionFragmentMatcher

1 个答案: