5. 前端
5m

🎯  您的目标是在 Catstronauts 应用程序模块页面上显示查询结果。

页面设置任务
查询获取任务

路由解决方案

Module 组件导入到 client/pages/index.js. 

import Module from "./module";

Module 路由位于 Routes 子代中，具有正确的路径。

<Route element={<Module />} path="/track/:trackId/module/:moduleId" />

模块页面解决方案

完成的 module.js 文件位于 client/src/pages 应如下所示：

import React from "react";
import { useQuery, gql } from "@apollo/client";
import { useParams } from "react-router-dom";
import { Layout, ModuleDetail, QueryResult } from "../components";
 
/**
* GET_MODULE_AND_PARENT_TRACK gql query to retrieve a specific module and its parent track,
* both needed for the ModuleDetail component
*/
export const GET_MODULE_AND_PARENT_TRACK = gql`
  query GetModuleAndParentTrack($moduleId: ID!, $trackId: ID!) {
    module(id: $moduleId) {
      id
      title
      content
      videoUrl
    }
    track(id: $trackId) {
      id
      title
      modules {
        id
        title
        length
      }
    }
  }
`;
 
/**
* Module page fetches both parent track and module's data from the gql query GET_MODULE_AND_PARENT_TRACK
* and feeds them to the ModuleDetail component
*/
const Module = () => {
  const { moduleId, trackId } = useParams();
  const { loading, error, data } = useQuery(GET_MODULE_AND_PARENT_TRACK, {
    variables: { moduleId, trackId },
  });
   
  return (
    <Layout fullWidth>
      <QueryResult error={error} loading={loading} data={data}>
        <ModuleDetail track={data?.track} module={data?.module} />
      </QueryResult>
    </Layout>
  );
};
 
export default Module;

就是这样！请记住，如果您遇到困难，可以在仓库的 final 文件夹中找到一个正常运行的应用程序的完整解决方案。

上一步