Let's get our project set up! In this course, we'll play the role of a backend developer using Apollo Federation to build a supergraph for an app called FlyBy.
But first, let's imagine we've been transported far into the future, where everyone can traverse the galaxy for fun and adventure... and this is where FlyBy comes in.
In this lesson, we will:
- Explore the features of FlyBy, the demo app for this course
- Set up the FlyBy starter code
What You'll Build: FlyBy
FlyBy is a web app that lets users review places they've visited on their intergalactic travels. They can browse a list of all the locations fellow space travelers have visited, see the details and reviews for each location, and submit reviews of their own.
Want a preview? You can explore the final version of the FlyBy app.
Like most apps, Flyby starts small. But by using a supergraph architecture right from the start, we can scale the FlyBy graph as the app and organization inevitably grow.
To build out the FlyBy supergraph, we will:
- Publish two subgraphs:
- Set up the router (Lessons 7-8)
- Update the subgraphs to share types between them (Lessons 9-14)
- See how everything fits together with the frontend (Lesson 14)
Let's get started!
FlyBy uses Node.js on the backend and React on the frontend. We recommend using the latest LTS version of Node. To check your Node version, run
You'll also need to be comfortable with:
- Running commands in the terminal, such as navigating between directories.
- GraphQL and Apollo basics, like how to define a schema, build resolver functions, and write GraphQL operations. (Need a refresher? Check out the Odyssey Lift-off series!)
✏️ Clone the repository
Note: When you see a heading that starts with the ✏️ emoji, that means it contains some work for you to do!
Open your preferred terminal in the directory of your choice.
Clone the FlyBy starter code repository by running the following command:git clone https://github.com/apollographql/odyssey-voyage-I
Open the repository in your favorite IDE. (We use VS Code.)
The FlyBy repo contains a full-stack app, with the frontend in the
client/ directory and the backend split between three server directories. Each server runs on a different port, so you can run them all at the same time when you're developing on your local machine.
In this course, we'll focus entirely on the server-side code. (The client code has already been developed for you, so you won't need to touch it.)
The servers are split up as follows:
|The backend code for the router (the server the client sends GraphQL requests to).|
|The backend code for the |
|The backend code for the |
Note: For this course, our router and our subgraphs are all located in one repo. But in a production app, these could be split out so that each GraphQL server gets its own repository.
The starter code also includes a
final/ directory that contains the final state of our supergraph at the end of the course. Feel free to use it as a reference!
✏️ Install project dependencies
To finish setting up the starter code, install the project dependencies for each of the subgraph servers.
From the command line, change directories into the
subgraph-locationsdirectory, and run
Change directories into the
subgraph-reviewsdirectory, then run
Don't worry about the
router directory for now. We'll talk about how to set up this piece in an upcoming lesson.
✏️ Apollo Studio Setup
This course uses managed federation, meaning that FlyBy uses Apollo Studio to handle updates to the router automatically. (More on this later in the course!)
To use managed federation, we'll need to have an Apollo Studio account with an Enterprise plan.
You can still follow along if your organization is on a different plan, but you won’t be able to complete certain hands-on tasks. You can also test out this functionality by signing up for a free Enterprise trial.
In the next part, we'll check in with the frontend team to take a closer look at FlyBy's data requirements.
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.