7. Building the track page
4m

📄 Adding a new track page

We have our server set up and we know the query we need to make. Now let's see how this fits into our user flow by creating the boilerplate for our Track page.

Let's create a new file in the client/src/pages folder. We'll call it track.js.

We import React at the top, then gql and useQuery from @apollo/client, and lastly, our Layout and QueryResult components.

In client/src/pages/track.js:

import React from 'react';
import {gql, useQuery} from '@apollo/client';
import {Layout, QueryResult} from '../components';

Now let's build the skeleton of the Track page.

We'll declare a functional component that takes a trackId destructured from the props input. This prop will be coming as a parameter from the route, or the browser's URL, which we'll set up later.

For now, let's return the layout of the page. Make sure to export the component below.

In track.js:

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

We have an empty Track page, great. But how do we access that page? We'll need to add a new route in our index page.

🛣 Adding a new route

Staying in the same pages folder, let's open up the index.js file. At the top, let's import our Track component.

import Track from './track';

Inside the Router component, below Tracks, we can add our Track component and set its path prop to /track/:trackId.

<Track path="/track/:trackId" />

You can learn more about how this routing works in the Reach Router docs. For now, we know that if we go to this path, or URL, in our browser, and give it a trackId like c_0 for example, it will display the Track page.

The index.js file in client/src/pages should now look like this:

<Router primary={false} component={Fragment}>
<Tracks path="/" />
<Track path="/track/:trackId" />
</Router>

Let's check to see if this new route works.

First let's start up our client app. Open up a new terminal, since we want to keep our server running, then navigate to the client folder with cd client. Run npm start.

This should open up a page in the browser to localhost:3000 to show the homepage. Let's navigate to the new route we just added: localhost:3000/track/c_0.We should see a blank page layout! We'll start to fill this in with the data we retrieve from the query.

Screenshot showing a blank layout in the correct route

Task!

💻 Setting up our client's query

Open up the track.js file again in client/src/pages.

Let's build our track query. We'll call it GET_TRACK all caps, and use the gql template literal. Let's add an export keyword to the declaration so the query is available in our test cases later on.

In track.js, after the imports:

export const GET_TRACK = gql`
// our query goes here
`;

And now we could either build our query by hand, or, because we already did the job in Apollo Studio, let's head back there, copy the query in our Operations section and paste it in our GET_TRACK variable just between the backticks in the gql tag.

query getTrack($trackId: ID!) {
track(id: $trackId) {
id
title
author {
id
name
photo
}
thumbnail
length
modulesCount
numberOfViews
modules {
id
title
length
}
description
}
}

On the client side, where will the query above get the value for the $trackId variable?

Loading...

With our query all set, we're now ready to wield our useQuery hook in the next lesson.

Previous
Next