1. Feature Overview
You're currently on an older version of this course. View course changelog.

👋 Welcome to Lift-off IV!

Good to see you here for Lift-off Part IV! We've been hard at work on our Catstronauts app, diving into on both the server and client side.

So far, we've only dealt with retrieving data from our API. Now it's time to switch gears and work on modifying our data with .

Each track in our app displays the number of times it's been viewed. We want to increment this number every time a user visits the track page from the homepage.

To do this, we'll update our schema to include , learning best practices for our mutation responses. We'll write our to handle both successful responses and errors. And lastly on the client-side, we'll use a React hook called useMutation to send our request to the .

Ignition sequence...


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 part I, part II and part III.

Note: In this course, we're using 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 -b v1 https://github.com/apollographql/odyssey-lift-off-part4

Note: The git clone above command might look a bit different than what you're used to. This course uses v1 of the starter code repo. Click here to access the most up-to-date version of this course.


Project structure

This repo picks up where Lift-off III left off. 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-part4
┣ 📂 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.


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.


Setting up the Explorer

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

To open the Explorer in , 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 it. Let's click Query your server to see our in action with .


Let's get to it!


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.