👋 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 GraphQL 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 GraphQL mutations.
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 mutations, learning best practices for our mutation responses. We'll write our resolvers 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 GraphQL server.
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-part4
This repo picks up where Lift-off III left off. Our project is a full-stack app with the back-end app in the
server/ directory and the front-end app in the
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
localhost:3000 in the browser and see our homepage, which shows multiple track cards.
Setting up the Apollo Studio Explorer
To write our queries, we'll be using the Apollo Studio Explorer. 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.
If you've already set up your Studio development graph in Lift-off I, check off the task below. If not, click on "Set-up Explorer" below and follow the steps!
Let's get to it!