Frontend

🎯 Your goal is to display the query results on the Catstronauts app module page.

Page Setup Tasks

Create a new file called module.js in the client/src/pages folder for the new module page.In the module page, write boilerplate code to display a blank layout, using the Layout component. For better UI styling, add the fullWidth prop to the Layout component.Add the module's route in pages/index.js by adding the Module component inside the Routes (don't forget to import the component at the top!).Pass the route the correct path. An example of a route would look like: /track/c_0/module/l_0 where c_0 is the trackId and l_0 is the moduleId.

Route Solution

The Module component imported in client/pages/index.js.

import Module from "./module";

The new Module route inside the Routes children, with its correct path.

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

Module Page Solution

The finished module.js file in client/src/pages should look something like this:

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;

And that's it! Remember that if you get stuck, you can find the full solution of a working app in the repo's final folder.