4. Grow the supergraph

🌱 Grow the supergraph

With our 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 has a User type with three s: an id, a name string, and a hasLicense boolean. It also has a two Query s, the one we'll use here is user, with an id 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.

users subgraph 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 .

users Sandbox on localhost:4002
query User($userId: ID!) {
user(id: $userId) {
users Sandbox (Variables panel)
"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 tracks subgraph on port 4001.
  • The users subgraph on port 4002.
  • The supergraph running on port 3000, but right now, it only knows about the tracks subgraph.

Time to use rover dev on this new users subgraph, and bring it into our !

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 is composed.

Back to the 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.

supergraph Sandbox on localhost:3000
query UserNameAndTrackTitles($userId: ID!) {
user(id: $userId) {
tracksForHome {
supergraph Sandbox (Variables panel)
"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 is working as expected locally!

cats cheering

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 , 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.