构建曲目页面 - GraphQL 教程 - Apollo GraphQL 中文

7. 构建曲目页面

📄 添加一个新的曲目页面

我们已经设置好了服务器，我们知道查询我们需要进行的。现在让我们看看如何通过创建曲目页面的基本代码来将它融入我们的用户流程。

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

我们在顶部导入 React，然后导入 gql 和 useQuery 来自 @apollo/client。我们将需要我们的 Layout 和 QueryResult 组件，最后，我们将从 react-router-dom 导入 useParams。

client/src/pages/track.js

import React from "react";
import { gql, useQuery } from "@apollo/client";
import { Layout, QueryResult } from "../components";
import { useParams } from "react-router-dom";

现在让我们构建曲目页面的骨架。

我们将声明一个函数组件，在花括号内部，我们将从 useParams 函数返回的对象中解构 trackId。这个 trackId 将作为参数从路由或浏览器的 URL 传递过来，我们将在稍后设置它。如果没有传递 trackId，我们将将其设置为一个空字符串。

现在，让我们返回页面的布局。确保在下面导出组件。

client/src/pages/track.js

const Track = () => {
  const { trackId = "" } = useParams();
  return <Layout></Layout>;
};
 
export default Track;

我们有一个空的曲目页面，很好。但是我们如何访问该页面呢？我们需要在我们的索引页面中添加一个新的路由。

🛣 添加一个新的路由

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

client/src/pages/index.js

import Track from "./track";

client/src/pages/index.tsx

import Track from "./track";

在 Routes 组件内部，在 Route 渲染 Tracks 之后，我们可以添加一个新的 Route 组件，将 Track 组件传递给它，并将它的 path 属性设置为 /track/:trackId。

<Routes>
  <Route element={<Tracks />} path="/" />
  <Route element={<Track />} path="/track/:trackId" />
</Routes>

您可以在React Router 文档中了解更多关于此路由工作方式的信息。现在，我们知道，如果我们访问浏览器中的此路径或 URL，并给它一个 trackId，例如 c_0，它将显示曲目页面。

在 client/src/pages 文件夹中的 index.js 文件应该看起来像这样：

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Tracks from "./tracks";
import Track from "./track";

export default function Pages() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Tracks />} path="/" />
        <Route element={<Track />} path="/track/:trackId" />
      </Routes>
    </BrowserRouter>
  );
}

让我们检查一下这个新的路由是否有效。

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

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

Screenshot showing a blank layout on the /track/c_0 page

任务！

当我导航到 localhost:3000/track/c_0 时，我看到了一个空白的布局（Catstronauts 应用程序的标题、背景和页脚）。

💻 设置我们的客户端查询

再次打开 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 变量的值？

来自 Apollo Client 缓存它在查询中是硬编码的在资源管理器中的变量面板中来自用户的表单输入来自路由路径或浏览器 URL

来自客户端的查询

我们将查询字符串包装在

模板字面量中，然后使用

钩子将其发送到我们的服务器。

将项目从这个框拖动到上面的空白处

graphql
useApolloClient
useQuery
gql
useState

在我们的查询设置好之后，我们现在就可以在下一课中使用 useQuery 钩子了。

上一步

下一步

分享您对本课的疑问和评论

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

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