2. 探索我们的数据
3m

现在我们更多地了解了 从客户端到服务器再返回的过程。让我们将这些新获得的知识应用到我们的 Catstronauts 应用程序中。

首先，让我们问自己一些问题

  • 我们的数据存储在哪里，以及它的结构如何？
  • 该结构是否与我们客户端应用程序的需求和模式不同？
  • 我们的 函数如何访问这些数据？

解析器检索的数据可以来自各种地方：数据库、第三方 API、Webhook 等等。这些被称为 数据源。GraphQL 的优势在于，您可以混合使用任意数量的 来创建一个 API，满足您客户端应用程序的需求。

Hand-drawn illustration depicting a GraphQL server retrieving data from data sources such as a database, REST API and a web hook

我们的数据存储在哪里？

我们将使用位于https://odyssey-lift-off-rest-api.herokuapp.com/ 的 REST API。

Screenshot of the documentation for the Catstronauts REST API

查看 API 文档，看起来有 6 个端点可用。

GET   /tracks
GET   /track/:id
PATCH /track/:id
GET   /track/:id/modules
GET   /author/:id
GET   /module/:id

我们的数据结构如何？

我们需要弄清楚的下一个问题是我们的数据在 REST API 中的结构如何。这将影响我们需要如何检索和转换数据以匹配我们 中的字段。

对于我们当前在首页上显示轨道的功能，让我们从/tracks 端点开始。要从 REST API 文档测试此端点，我们可以点击 尝试它，然后 执行。

Screenshot identifying the Try it out button for the tracks endpoint of the Catstronauts REST API
Screenshot identifying the Execute button for the tracks endpoint of the Catstronauts REST API

我们得到一个 JSON 响应。

[
  {
    "id": "c_0",
    "thumbnail": "https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg",
    "topic": "Cat-stronomy",
    "authorId": "cat-1",
    "title": "Cat-stronomy, an introduction",
    "description": "Curious to learn what Cat-stronomy is all about? Explore the planetary and celestial alignments and how they have affected our space missions.",
    "numberOfViews": 0,
    "createdAt": "2018-09-10T07:13:53.020Z",
    "length": 2377,
    "modulesCount": 10,
    "modules": ["l_0", "l_1", "l_2", "l_3", "l_4", "l_5", "l_6", "l_7", "l_8", "l_9"]
  },
  {...},
]

响应包含一个轨道数组，这是一个良好的开端。让我们更详细地看看哪些内容匹配，并参考我们 Track 模式中的 ：

type Track {
  id: ID!
  title: String!
  author: Author!
  thumbnail: String
  length: Int
  modulesCount: Int
}

该数组包括我们在首页轨道卡片中需要的属性。

  • id
  • 缩略图
  • 标题
  • 模块计数
  • 长度

该数组 也 包含一些我们现在不需要的东西：

  • 主题
  • 描述
  • 浏览次数
  • 创建时间
  • 模块

该数组包含 ，我们不需要这些字段。我们的 函数将负责过滤数据属性，以仅匹配查询请求的内容。

以下关于数据源的说法哪些是正确的？

值得注意的是，该数组不包含我们需要的信息，例如作者姓名和照片。但是，它 确实 包含一个 authorId。我们可以将其提供给 /author/:id 端点，该端点接受一个 ID 参数并返回该作者的详细信息。

{
  "id": "cat-1",
  "name": "Henri, le Chat Noir",
  "photo": "https://images.unsplash.com/photo-1442291928580-fb5d0856a8f1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0"
}

查看我们模式中的 Author 类型，我们得到了我们需要的一切：

type Author {
  id: ID!
  name: String!
  photo: String
}

我们需要调用这个 /author/:id 端点，针对我们之前调用中收到的数组中的 每个轨道。然后我们需要将结果拼接起来，以便最终得到解析器和查询期望的数据形状。

id 为 cat-9 的作者姓名是什么？

我们知道我们的数据是由 REST API 提供的，以及该 API 的数据结构。接下来，我们将了解我们的 函数如何访问该 API。

上一页

分享您对本课的疑问和评论

您的反馈帮助我们改进！如果您遇到困难或感到困惑，请告诉我们，我们会帮助您。所有评论都是公开的，必须遵循 Apollo 行为准则。请注意，已解决或处理的评论可能会被删除。

您需要一个 GitHub 帐户才能在下面发布。还没有？ 请改为在我们的 Odyssey 论坛上发布。