12. 添加设施类型
10m

概述

快要完成清单详情页所需的数据了。让我们继续添加设施吧！

在本课中，我们将

  • 将Amenity 类型引入我们的模式
  • 构建查询，以显示清单及其所有设施的数据

构建 Amenity 的类型

正如我们在关于 语法的课程中 在 类型上不必返回基本 类型，它们还可以返回其他 ！

例如，我们可以给我们的 Listing 类型一个 amenities ——但此字段实际上返回什么内容？

A screenshot of Airlock, focused on a particular listing's amenities 

type Listing {
  id: ID!
  title: String!
  description: String!
  numOfBeds: Int!
  costPerNight: Float!
  closedForBookings: Boolean
  amenities: # What type should this be?
}

戴上商务眼镜，我们可以看到有关便利设施的更详细数据——比如它的 id、名称、所属类别——将会非常有用。某一家房源提供的便利设施越多或描述越详细，用户就有可能越愿意预订！此外，多个房源可能拥有同种类型的便利设施；与 id 或 title 不同，某一家房源的便利设施可能并不是该房源独有的！

出于这些原因，我们需要将“便利设施”设想为一个独立的 ——换句话说，我们应该创建自己的 类型，将其命名为 Amenity.

这意味着我们应该更新 Listing 类型：我们需要将其 amenities 更改为返回一个 Amenity 类型列表！

使用 amenities 描述和 （下面突出显示）更新 Listing 类型。

type Listing {
  id: ID!
  title: String!
  description: String!
  numOfBeds: Int!
  costPerNight: Float!
  closedForBookings: Boolean
  "The amenities available for this listing"
  amenities: [Amenity!]!
}

现在，让我们实际定义 Amenity 的样子。从我们的 REST API 响应中，我们知道我们可以从几个属性开始： id、 name 和 category。在 schema.graphql 文件中，添加下方所示的新 Amenity 类型：

type Amenity {
  id: ID!
  "The amenity category the amenity belongs to"
  category: String!
  "The amenity's name"
  name: String!
}

然后从该架构的角度来看，我们就完成了！

在我们保存更改后，codegen 进程应自动运行。我们可以检查 types.ts 来确保已添加了新的 Amenity 类型！

types.ts
export type Amenity = {
  __typename?: "Amenity";
  /** The amenity category the amenity belongs to */
  category: Scalars["String"]["output"];
  id: Scalars["ID"]["output"];
  /** The amenity's name */
  name: Scalars["String"]["output"];
};
任务！

测试 Amenity 类型

回到 Explorer。我们将尝试运行 ，该查询调用清单的 amenities 详情。

query GetListing($listingId: ID!) {
  listing(id: $listingId) {
    title
    numOfBeds
    amenities {
      name
      category
    }
  }
}

并确保在 变量面板中我们的 $listingId 仍被设定。

{ "listingId": "listing-1" }

当我们运行 ... 获得我们房源的设施数据！

另寻他法

现在看一下路径 featuredListings ？它是我们模式中的另一个入口点，它返回类型为 Listing 的一个 Listing 列表，然后我们可以为这些列表请求 amenities 。我们来试试。

GraphQL 操作
query GetFeaturedListings {
  featuredListings {
    id
    title
    description
    amenities {
      id
      name
      category
    }
  }
}

糟糕！

https://127.0.0.1:4000

A screenshot of the Explorer, showing an error when we query for amenities on featured listings

响应面板中出现一个错误，而不是我们想要的响应数据。问题是什么呢？

错误信息
"Cannot return null for non-nullable field Amenity.name."

我们无法为一个 单个 房源返回 amenities 数据，在尝试为我们每个 精选 房源包含这些便利设施数据时出现了一些问题。

本次要点

  • 一个 的 可以返回 类型或者其他对象类型。
  • 当一个 在 上返回 另一个 时，我们可以编写复杂查询，来从一个对象遍历到另一个对象，无需后续查询！

下一步

让我们来研究一下这些错误的来源并修复它们。

上一步

分享有关此课程的问题和评论

本课程目前处于

测试版
.您的反馈有助于我们进步！如果您遇到困难或迷惑不解，请告诉我们，我们会为您提供帮助。所有评论都是公开的，并且必须遵循 Apollo 行为准则。请注意，已经得到解决或处理的评论可能会被删除。

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