9. 定义一个查询
2m

📦 组件中的查询

现在我们已经初始化了 ，我们可以设计第一个 ，我们的客户端将执行它。具体来说，我们将设计我们的曲目页面将用来显示卡片网格的查询。

我们曲目页面的代码位于 src/pages/tracks.js。目前，该页面只显示我们之前见过的基本布局。让我们添加一个 定义到它。

就像我们在定义我们的 Schema 时一样，我们需要将所有 字符串包装在 gql 模板字面量中。让我们导入 gql：

import { gql } from "@apollo/client";

接下来，我们将声明一个名为 TRACKS 的常量，它包含一个空的 字符串（按照惯例， 常量为 ALL_CAPS）：

const TRACKS = gql`
  # Query goes here
`;

现在，还记得我们在 Apollo Explorer 中构建的用于检索曲目数据的 吗？方便的是，这正是我们需要的查询！

返回 Explorer，在那里我们将从 Sandbox 集合中访问 。

https://127.0.0.1:4000
Screenshot of the Operation Collections menu, opened to access a saved operation

当我们从我们的集合中点击 TracksForHome 时，保存的 会自动插入到 操作 面板中的新选项卡中。

https://127.0.0.1:4000
Clicking on an operation saved in a collection to insert it into the Operation panel

让我们复制 ，然后返回我们的代码。

现在，我们可以将 直接粘贴到我们空的 gql 字符串中。

/** TRACKS query to retrieve all tracks */
const TRACKS = gql`
  query GetTracks {
    tracksForHome {
      id
      title
      thumbnail
      length
      modulesCount
      author {
        id
        name
        photo
      }
    }
  }
`;
代码挑战！

创建一个 ListSpaceCats 查询，其中包含一个 spaceCats 查询字段，以及其按顺序排列的 name、age 和 missions 选择集。对于 missions 字段，选择 name 和 description

加载进度
以下哪项是创建客户端查询的最佳实践？

我们的 已准备就绪，可以执行。让我们最后在我们的主页上显示一些太空猫！

上一步

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

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

您需要一个 GitHub 帐户才能在下方发布。没有？ 改在 Odyssey 论坛中发布。