4. Grow the supergraph
4m

🌱 Grow the supergraph

With our up and running, it's time to get to work on our users . Modularizing, remember?

Well, we're in luck! A colleague already gave us a head start for this new users 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 this new project right away to explore what's there.

./supergraph/
cd  lift-off-supergraph-demo-users

The project's structure is very similar to our tracks : we see an index.js, resolvers.js, schema.graphql, and a datasources folder.

In index.js, the server is configured as a and is almost identical to the tracks , except for the port, which is set to 4002.

The schema has a User type with three : an id, a name string, and a hasLicense boolean. It also has a two Query , 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 , let's try running it.

Run the following commands to install dependencies and start the :

./lift-off-supergraph-demo-users/
npm install
./lift-off-supergraph-demo-users/
npm run dev

Our users 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 '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 to get that user's name .

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 on port 4001.
  • The users on port 4002.
  • The running on port 3000, but right now, it only knows about the tracks .

Time to use rover dev on this new users , 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 asks for the URL, we'll fill in http://localhost:4002. For the 's name, we'll give it users.

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 . 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 for both track and user details.

Task!

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 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 👋 !

Previous

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.