Odyssey

Lift-off III: Arguments

Feature OverviewUpdating our schemaGraphQL argumentsResolver args parameterResolver chainsQuery building in Apollo SandboxBuilding the track pageThe useQuery hook - with variablesNavigating to the track page
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 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.

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 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 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 query. 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 query 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 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?
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

  • useQuery

  • graphql

  • useState

  • gql

  • useApolloClient

To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.

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

Previous
Next

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.

              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              Router

              The single access point for a federated GraphQL architecture. It receives incoming operations and intelligently routes them across component services before returning a unified response.

              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              variable

              A placeholder for dynamic values in an operation allowing parameterization and reusability in requests. Variables can be used to fill arguments or passed to directives.

              query GetUser($userId: ID!) {
              user(id: $userId) {
              firstName
              }
              }

              In the query above, userId is a variable. The variable and its type are declared in the operation signature, signified by a $. The type of variable is a non-nullable ID. A variable's type must match the type of any argument it's used for.

              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              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