12、React中使用GraphQL和Apollo Client实现问题功能及数据预取

React中使用GraphQL和Apollo Client实现问题功能及数据预取

1. 实现问题功能：设置

在之前的开发中，我们已经在React应用中实现了大部分常见的Apollo Client功能。现在，我们将开始为应用实现扩展功能，具体展示如何使用Apollo Client在React中实现一个完整的功能。

1.1 渲染 Issues 组件

首先，在 RepositoryList 组件中渲染一个名为 Issues 的新组件。这个组件接收两个属性，用于在GraphQL查询中识别要从中获取问题的仓库。

// src/Repository/RepositoryList/index.js
...
import FetchMore from '../../FetchMore';
import RepositoryItem from '../RepositoryItem';
import Issues from '../../Issue';
...
const RepositoryList = ({
  repositories,
  loading,
  fetchMore,
  entry,
}) => (
  <Fragment>
    {repositories.edges.map(({ node }) => (
      <div key={node.id} className="RepositoryItem">
        <Repository