5. Frontend
5m

🎯  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 Router children, with its correct path.

<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 {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 Module detail component
*/
const Module = ({moduleId, trackId}) => {
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