4. Grow the supergraph
4m

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

./supergraph/
git clone https://github.com/apollographql-education/lift-off-supergraph-demo-users.git

And while we're at it let's cd into to this new project right away

./supergraph/
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:

./lift-off-supergraph-demo-users/
npm install
./lift-off-supergraph-demo-users/
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.

https://studio.apollographql.com/sandbox/explorer
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 field.

users Sandbox on localhost:4002
query User($userId: ID!) {
user(id: $userId) {
name
}
}
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!

Task!

🪛 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 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 fill in http://localhost:4002, and for the subgraph's name, we add 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.

supergraph Sandbox on localhost:3000
query UserNameAndTrackTitles($userId: ID!) {
user(id: $userId) {
name
}
tracksForHome {
title
}
}
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.

Task!

Woohoo!!! Our supergraph 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, so if you're eager to learn more about federated architecture, check out our complete series on the topic: Voyage.

See you there 👋 !

Previous