1. Introduction
2m

Overview

Welcome to this Odyssey side quest! 🚀 Side quests are shorter courses that briefly introduce a single topic. By completing side quests, you can quickly add new GraphQL techniques to your developer toolbelt, helping you become the best graph developer you can be!

Note: Unlike Odyssey courses, side quests are more of a case study, showing examples of how certain topics apply in a particular codebase. A repo with the demo app is included, in case you want to dig into the code more on your own.

This side quest introduces some new GraphQL concepts that you can use to design more complex s. It also showcases examples of how to use these tools in a real-world application.

In this side quest, we'll cover:

  • The enum type
  • The input type
  • The interface type and query s

Prerequisites

Before completing this side quest, you should already be comfortable with the concepts in the Lift-off series, including:

  • Defining a GraphQL using and s
  • Writing GraphQL queries
  • Using Apollo Studio to query a locally running GraphQL server

You should also be comfortable using the command line to navigate between directories, run commands, and use basic Git s.

Introducing Airlock

In this side quest, we'll be looking at a demo application called Airlock, a website that helps you browse and book intergalactic travel plans.

The Airlock app homepage with a list of places to book.

Using Airlock, guests can find listings that meet their dates of choice and the number of beds they'll need. They can learn what each place is all about and what amenities it offers, and if they're interested, they can book their stay in one click (provided they have enough space credits in their wallet, of course)!

Hosts can also rent out their own space suites with Airlock too! They can add their listings to the platform with all the necessary details and manage their bookings. After each stay, guests and hosts can leave honest ratings and reviews about each other.

In this side quest, we'll see how Airlock uses each of the new GraphQL concepts listed earlier. Let's start by setting up the Airlock codebase.

Setting up the Airlock codebase

To get started with Airlock, you can download the codebase by opening a new terminal window and running the command below:

git clone https://github.com/apollographql-education/side-quest-intermediate-schema-design

Backend servers

The code for the Airlock backend can be found in the server directory. This includes a GraphQL server, as well as a combination of REST APIs and databases for the app's various backend services (found in the server/services directory).

  1. To start the GraphQL server, open a new terminal window and run the following commands:
cd server
npm install
npm start
  1. To start the backend services that Airlock uses to fetch data, open another new terminal window and run the following commands:
cd server
npm run launch
  1. Once you've started both the GraphQL server and the backend services, you should be able to query the Airlock backend by opening http://localhost:4000 in Apollo Studio Sandbox.
Task!

Frontend client

The frontend code for Airlock can be found in the client directory.

  1. To start the frontend client, open another new terminal window, and run the following commands:
cd client
npm install
npm start
  1. You can access the Airlock website in a browser at http://localhost:3000.
Task!
Screenshot of the Airlock homepage

Up next

Now that you've got Airlock up and running on your computer, it's time to get started! In the next lesson, we'll take a closer look at our first new GraphQL concept: the enum type.

Next