Odyssey

Lift-off lab

Project SetupProject RequirementsSchemaResolvers & data sourcesFrontend
5. Frontend
1m

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

Page Setup Tasks
Query Fetching Tasks

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.

Previous

              NEW COURSE ALERT

              Introducing Apollo Connectors

              Connectors are the new and easy way to get started with GraphQL, using existing REST APIs.

              Say goodbye to GraphQL servers and resolvers—now, everything happens in the schema!

              Take the course