Welcome to Voyage I Lab! In this hands-on project we'll take the companion app of Odyssey Voyage I, FlyBy, and update it to use Apollo Federation v2! You can find the course lessons and instructions in Odyssey, Apollo's learning platform.
TODO: You can preview the completed demo app here.
The lab will walk you step by step through how to implement the features you see in the demo app. This codebase is the starting point of your journey!
You will work in four main folders:
gateway
subgraph-activities
subgraph-locations
subgraph-reviews
The course will help you set up and run each of these servers.
The repo also includes a client
folder, which includes the frontend for the FlyBy app. We'll make a few updates in this folder at the end of the course.
To run the client:
- Open a new terminal window, and navigate to the
client
folder. - Run
npm install & npm start
. This will install all packages in the client and start the application inlocalhost:3000
.
The repo also includes a final
folder, to show what your code should look like once you've finished the course. You can use it to check your work if you get stuck.
To run the servers in the final
folder:
- Open a new terminal window, and navigate to
final/gateway
. - Run
npm install && npm start
. This will install all packages in the main server, then start the main server athttp://localhost:4000
. - Open another new terminal window, and navigate to
final/subgraph-locations
. - Run
npm install && npm start
again. This will install all packages for thelocations
subgraph, then start the subgraph athttp://localhost:4001
. - Open a third new terminal window, and navigate to
final/subgraph-reviews
. - Run
npm install && npm start
again. This will install all packages for thereviews
subgraph, then start the subgraph athttp://localhost:4002
. - In a web browser, open Apollo Studio Sandbox for
http://localhost:4000
. You should be able to run queries against your gateway server. Some test queries are included in the following section.
-
Get all locations for the homepage.
query getAllLocations { locations { id name photo description overallRating } }
-
Get the latest reviews for the homepage.
query LatestReviews { latestReviews { comment rating location { name description } } }
-
Get details for a specific location.
query getLocationDetails { location(id: "loc-1") { id name description photo overallRating reviews { comment rating } } }
-
Submit a review for a location.
mutation submitReview { submitReview(review: { comment: "Wow, such a great planet!", rating: 5, locationId: "1" }) { code success message review { id comment rating } } }
For any issues or problems concerning the course content, please refer to the Odyssey topic in our community forums.