2. 探索我们的数据
3m
当前您正在使用此课程的较旧版本。 查看课程变更日志.

现在我们进一步了解了 从客户端到服务端再返回。

让我们利用这些新知识，来了解 Catstronauts 应用程序。

  • 首先，让我们问自己几个问题
  • 我们的数据存储在哪里，它是什么结构？
  • 我们的 函数如何访问该数据？

检索到的数据可能来自各种位置：数据库、第三方 API、webhook 等。这些被称为数据源。 的妙处在于，您可以混合任意数量的 ，以便创建满足您的客户端应用程序需求的 API。

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

我们的数据存储在哪里？

我们将使用位于以下位置的 REST APIhttps://odyssey-lift-off-rest-api.herokuapp.com/.

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
  • 缩略图
  • 标题
  • modulesCount
  • 长度

数组还包括了很多我们现在不需要的东西：

  • 主题
  • 描述
  • 观看次数
  • 创建时间
  • 模块

数组包含都没关系，我们不需要它们。我们的 函数将负责过滤数据属性，以仅匹配所请求的内容。

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

值得注意的是，该数组不包含我们需要的作者信息，例如姓名和照片。但是，它确实包含 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 帐户才能在此处发帖。没有 GitHub 帐户？ 改为在我们的 Odyssey 论坛中发帖。