🌱 Grow the supergraph
With our supergraph up and running, it's time to get to work on our users subgraph. Modularizing, remember?
Well, we're in luck! A colleague already gave us a head start for this new users subgraph and made the code available at this repo.
In a new terminal window let's navigate back to our supergraph directory, clone the users repo, and explore what's in there.
git clone https://github.com/apollographql-education/lift-off-supergraph-demo-users.git
And while we're at it, let's cd into this new project right away to explore what's there.
cd lift-off-supergraph-demo-users
The project's structure is very similar to our tracks subgraph: we see an index.js, resolvers.js, schema.graphql, and a datasources folder.
In index.js, the server is configured as a subgraph and is almost identical to the tracks subgraph, except for the port, which is set to 4002.
The schema has a User type with three fields: an id, a name string, and a hasLicense boolean. It also has a two Query fields, the one we'll use here is user, with an id argument to retrieve a specific user.
That's it for the project overview. Feel free to look into the other files if you're curious, but we don't need to worry about the specifics.
Now that we know what's in this subgraph, let's try running it.
Run the following commands to install dependencies and start the subgraph:
npm install
npm run dev
Our users subgraph is now running on port 4002. Let's check that it's working.
In a new browser window, navigate to http://localhost:4002 to access this subgraph's Sandbox.
Use the Variables panel to provide a random user's id (let's say "u_2"), and then run a query to get that user's name field.
query User($userId: ID!) {user(id: $userId) {name}}
{"userId": "u_2"}
Good, everything works as expected, and that completes our second goal: have a users subgraph that returns data about user details!
🪛 The final touch
Quick recap of what's currently running:
- The
trackssubgraph on port4001. - The
userssubgraph on port4002. - The supergraph running on port
3000, but right now, it only knows about thetrackssubgraph.
Time to use rover dev on this new users subgraph, and bring it into our supergraph!
Let's open another terminal window, navigate to the lift-off-supergraph-demo-users project directory, and start another rover dev process.
When Rover asks for the subgraph URL, we'll fill in http://localhost:4002. For the subgraph's name, we'll give it users.
Rover prints out… and lets us know that the supergraph is composed.
Back to the supergraph Sandbox (on port 3000), we can see that the available fields to query have been refreshed, and… tada 🎉! We can now query from the users subgraph. Let's try retrieving data from both subgraphs: the "u_2" user's name, as well as a list of titles for the tracks available.
query UserNameAndTrackTitles($userId: ID!) {user(id: $userId) {name}tracksForHome {title}}
{"userId": "u_2"}
Hurray, we get "IceCat" for the user and a bunch of titles for the tracks.
We've completed goal #3: have a single endpoint that clients can query for both track and user details.
Woohoo!!! Our supergraph is working as expected locally!
If we wanted to complete our Catstronauts pilot license project, the next steps would be to expand the features of our users subgraph and create additional subgraphs for certifications and exams. But that's a project for another time.
Congrats on successfully building your very first supergraph, this is quite a milestone! 🎉
This is only the beginning of the journey!
If you want to take this project out of local development and into production with GraphOS, check out the Getting started with GraphOS course.
If you're eager to learn more about federated architecture, check out our complete series on the topic: Voyage.
See you there đź‘‹ !
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.