Graphql react-apollo IntrospectionFragmentMatcher答案

【问题标题】：Graphql react-apollo IntrospectionFragmentMatcherGraphql react-apollo IntrospectionFragmentMatcher
【发布时间】：2019-09-04 10:31:57
【问题描述】：

我正在使用 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);
      });
  };

【问题讨论】：

标签： javascript graphql apollo react-apollo

【解决方案1】：

因为 Apollo 没有足够的关于你的 GraphQL Schema 的信息，你需要以某种方式提供它。 Apollo 有一个关于该主题的well written documentation。

它描述了使用脚本自省您的 GraphQL 服务器，以获取有关联合和接口的缺失信息。

为了让这个过程更简单，我为 GraphQL 代码生成器编写了一个插件，它可以自动执行所有操作。有一个章节叫"Fragment Matcher"，我推荐阅读。

首先，手动解决方案或第二个应该可以解决您的问题:)

【讨论】：