4. 构建架构
4m

概述

是时候把我们学到的关于 的知识运用起来了。

在本课中,我们将

  • 定义我们的架构

构建架构

让我们导航到src 目录。在其中,我们将创建一个名为 schema.graphql 的新文件。

📂 src
┣ 📄 graphql.d.ts
┣ 📄 helpers.ts
┣ 📄 index.ts
┗ 📄 schema.graphql

✏️ 让我们定义该架构

参考我们特色房源的模型,我们确定需要为每个房源提供一些数据。

A screenshot of Airlock, focused on the row of featured listings and their required fields

在本课程中,我们将跳过房源照片和整体评分,而是处理模型的简化版本。

以下是我们将开始使用的基本

  • 标题
  • 床位数量
  • 每晚费用
  • 是否已关闭预订

我们还需要一个 ,我们可以用它来区分一个房源与另一个房源——我们将这个字段命名为 id

有了我们的 集,让我们让 Listing 类型活跃起来!

The Listing 类型

让我们在 schema.graphql 文件中定义 Listing 类型,并立即添加描述。

schema.graphql
"A particular intergalactic location available for booking"
type Listing {
# Fields go here
}

现在,对于房源的 ,我们将有:

  • id 类型为 ID!
  • title 类型为 String!
  • numOfBeds 类型为 Int
  • costPerNight 类型为 Float
  • closedForBookings 类型为 Boolean

因此,我们应该最终得到一个看起来像这样的 Listing 类型:

请务必注意你的 Listing 类型中的每个 的可空性!

schema.graphql
"A particular intergalactic location available for booking"
type Listing {
id: ID!
"The listing's title"
title: String!
"The number of beds available"
numOfBeds: Int
"The cost per night"
costPerNight: Float
"Indicates whether listing is closed for bookings (on hiatus)"
closedForBookings: Boolean
}

没有看到你想要的漂亮的 语法高亮显示?请查看 GraphQL:VS Code 的语法高亮扩展

现在 Listing 类型已经完成,但我们需要一种方法来实际 请求 我们的 获取房源数据。为此,我们有一个单独的 Query 类型。

The Query 类型

The Query 类型定义方式与其他任何 一样:

schema.graphql
type Query {
# Fields go here
}

该类型的 是我们架构的 入口点。这些是我们的客户端可以 的顶级

现在,我们只对获取我们首页的特色房源列表感兴趣。让我们将 命名为 featuredListings,使其尽可能具有描述性。我们希望这个 返回一个 Listing 列表。我们还会添加一个不错的描述:

schema.graphql
type Query {
"A curated array of listings to feature on the homepage"
featuredListings: [Listing!]!
}

我们的架构现在已完全定义,可以支持我们的第一个功能!

练习

以下关于 Query 类型的陈述哪些是正确的?
字段类型后面的感叹号表示什么?

关键要点

  • 我们使用 Query 类型来定义客户端可以 的顶级 。这些字段是我们架构的入口点。

接下来

本课程的主题是构建一个 ,所以让我们开始吧!是时候认识一下

Previous

分享您关于本课的问题和评论

本课程目前处于

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

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