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

最新推荐文章于 2025-11-15 22:45:57 发布

原创最新推荐文章于 2025-11-15 22:45:57 发布 · 21 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React #GraphQL #Apollo Client

GraphQL实战：从零到全栈专栏收录该内容

19 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

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