1. Introduction
2m

Overview

This side quest introduces some new concepts that you can use to design more complex schemas. 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 s

Prerequisites

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

  • Defining a using and s
  • Writing queries
  • Using to a locally running

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

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 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 , 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 , 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 and the backend services, you should be able to the Airlock backend by opening http://localhost:4000 in GraphOS 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 concept: the enum type.

Next