8. useQuery 钩子 - 带变量
4m
您目前正在使用该课程的较旧版本。 查看课程更改日志.

🪝 设置useQuery 钩子

要从我们的客户端调用，如您从 Lift-off I 中所记得的，我们需要利用 ApolloClient 的 useQuery 钩子。

我们将在 Track 组件中使用此钩子。打开 client/src/pages 文件夹中的 track.js 文件。

在 return 行之前，我们可以声明我们将从 useQuery 钩子接收的常规 loading，error 和 data 对象。

const { loading, error, data } = useQuery();

我们将 GET_TRACK 查询作为钩子的第一个 ，现在与之前的查询相比有一个重大区别，那就是添加了一个第二个参数 - 一个 options 对象。

此对象将保存一个variables键，注意variables，因为可能包含多个。此variables键接受一个对象作为值，这里是传递我们的 trackId的地方。

const { loading, error, data } = useQuery(GET_TRACK, {
  variables: { trackId },
});
代码挑战！

使用useQuery钩子将GET_SPACECAT查询发送到服务器。它需要一个spaceCatId作为变量。从钩子的返回对象中解构出loading、error和data属性。

useQuery钩子
useQuery钩子返回一个包含三个有用属性的对象，我们都在我们的应用中使用： 
 
 指示查询是否已完成并返回结果。
 
 是一个包含任何操作的错误的对象。
 
 包含查询完成后查询的结果。为了在我们的查询中使用
 
 ，我们将在
 
在useQuery钩子的参数中声明它们，在选项对象内部。

将此框中的项拖放到上面的空格中

  • 数据

  • 第二个

  • 加载

  • 错误

  • 变量

  • 参数

  • 结果

  • 第一个

  • isComplete

📑 填充跟踪页面

现在我们可以通过在Layout中添加更多组件来开始向我们的空白跟踪页面添加更多信息。类似主页，我们将使用预构建的 QueryResult 组件以正确处理任何错误并显示加载状态。

在Layout组件的return行中添加以下内容：

<QueryResult error={error} loading={loading} data={data}>
  {/* this is where our component displaying the data will go */}
</QueryResult>

查询完成加载并且没有错误时，QueryResult 组件将渲染其子元素，并传递它们所需的数据。

我们提供了一个方便的 TrackDetail 组件，可用于显示这些数据。它位于 client/src/components 文件夹中，所以如果你好奇，你可以花一分钟来看看它以及UI元素是如何组织的。

让我们在我们track.js 文件顶部导入 TrackDetail 组件。

import TrackDetail from "../components/track-detail";

现在在 QueryResult 中，我们可以渲染 TrackDetail 组件并将 track 属性设置为 data?.track，在这里使用可选链接，因为数据将在查询完成加载后才可用。

<TrackDetail track={data?.track} />

现在跟踪页面一切都做好了！这里是所有更改后 track.js 文件应该看起来是什么样子：

client/src/pages/track.js
import React from "react";
import { useQuery, gql } from "@apollo/client";
import { Layout, QueryResult } from "../components";
import TrackDetail from "../components/track-detail";


/** GET_TRACK gql query to retrieve a specific track by its ID */
export const GET_TRACK = gql`
  query GetTrack($trackId: ID!) {
    track(id: $trackId) {
      id
      title
      author {
        id
        name
        photo
      }
      thumbnail
      length
      modulesCount
      numberOfViews
      modules {
        id
        title
        length
      }
      description
    }
  }
`;


/**
 * Track Page fetches a track's data from the gql query GET_TRACK
 * and provides it to the TrackDetail component to display
 */
const Track = ({ trackId }) => {
  const { loading, error, data } = useQuery(GET_TRACK, {
    variables: { trackId },
  });


  return (
    <Layout>
      <QueryResult error={error} loading={loading} data={data}>
        <TrackDetail track={data?.track} />
      </QueryResult>
    </Layout>
  );
};


export default Track;

💻 浏览器检查！

如果我们回到浏览器并导航到localhost:3000/track/c_0，我们应该可以看到包含所有详细信息的轨迹页面！我们看到了我们空间小猫咪的漂亮大缩略图，标题，轨迹详情，作者，模块详情和下面的描述！如果我们更改URL以显示不同的轨迹ID，例如c_1或c_2，页面将更新为正确的数据。

太好了，我们正走在正确的轨道上！ 🥁

Screenshot showing a track page with all of its details
您在浏览器中更改URL后看到轨迹页面了吗？当您访问https://127.0.0.1:3000/track/c_2时，模块列表中的第一个模块标题是什么？

最后只剩下一个细节需要完成我们的功能：我们需要设置一个动作，用于从主页触发到带有正确轨迹ID的轨迹页面的导航。我们将在下一个课程中准备好这一点！

上一页

分享您对这一课的疑问和评论

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

您需要GitHub账户才能发表评论。还没有吗？ 相反，在我们的Odyssey论坛上发帖。