7. 打造跟踪页面
4m
你当前使用的是本课程的旧版本。 查看课程更新日志.

📄 添加新跟踪页面

我们的服务器已设置好，我们已了解要，我们还需要通过为我们的跟踪页面创建模板来了解该查询如何与我们的用户流相匹配。

让我们在该文件夹中创建一个新文件client/src/pages中。我们将称其为 track.js。

我们在顶部导入 React，然后从 @apollo/client导入 gql和 useQuery以及最后的 Layout和 QueryResult组件。

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

现在让我们构建出跟踪页面的框架。

我们将声明一个函数组件，它获取从 props 输入中解构的 trackId。此 prop 将作为来自路径或浏览器 URL 的参数提供，我们稍后会对其进行设置。

现在，让我们返回页面的布局。请务必导出下面的组件。

client/src/pages/track.js
const Track = ({ trackId }) => {
  return <Layout></Layout>;
};


export default Track;

我们有一个空的 Track 页面，很好。但我们如何访问该页面？我们需要在我们的 index 页面中添加一个新路径。

🛣 添加新路径

在相同的 pages 文件夹中，让我们打开 index.js 文件。在顶部，让我们导入我们的 Track 组件。

import Track from "./track";

在 Router 组件中，在 Tracks 下面，我们可以添加我们的 Track 组件，并将它的 path prop 设置为 /track/:trackId。

<Track path="/track/:trackId" />

您可以在 Reach 文档中了解有关此路由工作原理的更多信息。现在，我们知道，如果我们在浏览器中转到此路径或 URL，并为其提供一个 trackId，例如 c_0，它将显示 Track 页面。

index.js 文件在 client/src/pages 中现在应如下所示：

<Router primary={false} component={Fragment}>
  <Tracks path="/" />
  <Track path="/track/:trackId" />
</Router>

让我们检查一下此新路径是否有效。

首先，让我们启动我们的客户端应用程序。打开一个新的终端，因为我们希望服务器继续运行，然后使用 cd client 导航到客户端文件夹。运行 npm start。

这应该在浏览器中打开一个页面localhost:3000 以显示主页。让我们导航到我们刚刚添加的新路径： localhost:3000/track/c_0。我们应该会看到一个空白的页面布局！我们将开始使用从 中检索到的数据填充它。

Screenshot showing a blank layout on the /track/c_0 page
任务！

💻 设置我们的客户端查询

再次在 client/src/pages 中打开 track.js 文件。

我们构建要查询的 。我们将把它称为 GET_TRACK（全部大写），并使用 gql 模板字面量。

client/src/pages/track.js
export const GET_TRACK = gql`
    // our query goes here
`;

现在我们可以手动构建要 的内容，或者，由于我们已经在 Sandbox 中完成了这项工作，让我们回到那里，复制 操作 面板中的查询，然后将其粘贴在我们 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
  }
}
对于上面查询的 $trackId 变量，客户端 会从何处获取它的值？
来自客户端的查询
我们用 
 
 模板字面量把查询字符串包装起来，然后用 
 
 hook 发送到服务器。

将此框中的项目拖放到上面空白处

  • useApolloClient

  • useState

  • useQuery

  • gql

  • graphql

设置好要 的内容后，我们现在准备好在下一节课中运用 useQuery hook。

上一个

分享你对本节课的问题和评论

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

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