1. Feature Overview
3m

👋 Great to see you in Part III of this Lift-off series!

Apollo certification badge

Lift-off III: Arguments is a certifying course!

By completing this course, you're getting one step closer to earning your Graph Developer - Associate Certification.

So far, we've built a homepage for our Catstronauts app that's filled with learning tracks for aspiring cat space explorers. We closely followed a GraphQL query's journey from client to server and back, and we set up resolvers to pull live data from a REST data source.

In this course, we'll add a second feature to our Catstronauts app: we want users to be able to click a track card on the homepage to navigate to a page that shows more details about that specific track.

To do this, we'll learn how to query for a single track using GraphQL arguments. We'll continue to apply our schema-first approach while adding to our schema's types and fields. We'll then update our resolvers and data sources accordingly. Finally, we'll jump into the frontend to send our query using GraphQL variables, and we'll add page navigation to tie everything together.

Ignition sequence...

Prerequisites

Our app uses Node.js on the backend and React on the frontend. This course can be completed stand-alone but builds on concepts previously covered in Lift-off I and Lift-off II.

Note: In this course, we're using Apollo Server 3. If you need to reference the Apollo documentation while going through the course, make sure you're on the v3 documentation set!

Clone the repository

In the directory of your choice with your preferred terminal, clone the app's starter repository:

git clone https://github.com/apollographql/odyssey-lift-off-part3

Task!

Project structure

This repo picks up where Lift-off II left off. To review, our project is a full-stack app with the backend app in the server/ directory and the frontend app in the client/ directory.

You'll also find a final/ folder that contains the final state of the project once you've completed the course. Feel free to use it as a guide!

Here's the file structure:

📦 odyssey-lift-off-part3
┣ 📂 client
┃ ┣ 📂 public
┃ ┣ 📂 src
┃ ┣ 📄 README.md
┃ ┣ 📄 package.json
┣ 📂 server
┃ ┣ 📂 src
┃ ┃ ┣ 📂 datasources
┃ ┃ ┃┣ 📄 track-api.js
┃ ┃ ┣ 📄 index.js
┃ ┃ ┣ 📄 schema.js
┃ ┃ ┣ 📄 resolvers.js
┃ ┣ 📄 README.md
┃ ┣ 📄 package.json
┣ 📂 final
┃ ┣ 📂 client
┃ ┣ 📂 server
┗ 📄 README.md

Now, open the repository in your favorite IDE.

Note: The examples in this course use npm, but you're welcome to use yarn if you prefer.

Let's start with the server app.

In a terminal window, navigate to the repo's server directory and run the following to install dependencies and run the app:

npm install && npm start

If all goes well, you'll see the installation complete and a message in the console indicating that the server is running.

Task!

Next, the client app.

In a new terminal window, navigate to the repo's client directory and run the following to install dependencies and start the app:

npm install && npm start

The console should show a bunch of output and a link to the running app at localhost:3000. You can navigate to http://localhost:3000 in the browser and see our homepage, which shows multiple track cards.

Task!

Setting up the Explorer

To write our queries, we'll be using the Explorer page in Apollo Sandbox. The Explorer is free to use, and it provides awesome development features like interactive query building, query history, and response hints. This will make building our queries fast and fun.

To open the Explorer in Apollo Sandbox, you can cmd+click on the URL in your terminal (from starting the server) to open it in your browser, or you can open it here: http://localhost:4000.

In the browser, we can see that our server is running successfully, with a message inviting us to query it. Let's click Query your server to see our graph in action with Apollo Sandbox.

http://localhost:4000
A screenshot of the landing page with a button prompting to query the server using Sandbox.

Task!

Ready to have fun? Let's get started!

Next