javascript - Graphql react-apollo内省(introspection)片段匹配器

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

您正在使用简单的(启发式)片段匹配器，但是您的查询包含联合或接口类型。 Apollo Client将无法准确映射片段。要使此错误消失，请按照docs中所述使用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);
      });
  };

最佳答案

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

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

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

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