7. Building the track page
4m
You're currently on an older version of this course. View course changelog.

📄 Adding a new track page

We have our server set up and we know the 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.

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.

client/src/pages/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 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 .

Screenshot showing a blank layout on the /track/c_0 page
Task!

💻 Setting up our client's query

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

Let's build our track . We'll call it GET_TRACK all caps, and use the gql template literal.

client/src/pages/track.js
export const GET_TRACK = gql`
    // our query goes here
`;

And now we could either build our by hand, or, because we already did the job in Sandbox, let's head back there, copy the query in our Operation panel and paste it in our GET_TRACK 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?
Query from the client
We wrap our query string in the 
 
 template literal and then send it to our server with the 
 
 hook.

Drag items from this box to the blanks above

  • useApolloClient

  • graphql

  • gql

  • useQuery

  • useState

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

Previous

Share your questions and comments about this lesson

Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.

You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.