2. Installing Federation 2
10m

Installing Federation 2

We've seen the problems, and upgrading to Federation 2 helps us build the solutions!

To start, let's update our gateway server to use Federation 2.

  1. Open a new terminal.
  2. Navigate to the gateway directory.
  3. Run the following command.
gateway
npm install @apollo/gateway@latest graphql@latest

Task!

This will update the version of the @apollo/gateway package in your package.json, package-lock.json, and node_modules directory to use Federation 2. It also updates the version of the graphql package needed to support an upgraded gateway.

Launching the subgraphs

There's nothing else we need to update in our gateway folder, but we do need to make a few modifications to our subgraphs.

Federation 2 definition

The first modification involves adding a Federation 2 definition to the top of our subgraph schema files. This identifies a schema as a true Federation 2 schema, enabling us to use new features and syntax.

extend schema
@link(url: "https://specs.apollo.dev/federation/v2.0",
import: ["@key", "@external"])

In this definition, we're specifying two directives under the import entry: @key and @external. These are the Federation directives we're going to make use of in this lab, but this line can be adjusted to add any other directives we might want to use in the future.

Let's bring this definition into each one of our schema files.

Adding the Federation 2 definition

Updating @apollo/subgraph

Each one of our subgraphs makes use of the @apollo/subgraph package to implement a subgraph schema. To get the most out of Federation 2 features, we'll want to update our installation of this package for each subgraph and add built-in support for new Federation 2 directives.

We've provided a script for you to update all three subgraphs at once. (Under the hood, this script runs npm install @apollo/subgraph@latest-2 from each subgraph directory.)

Open a new terminal in the root of the project, and run the command below.

odyssey-voyage-I-lab
npm run upgrade-subgraphs

Task!

Starting the subgraphs

Let's start up our subgraph servers and make sure all three services are running. In a terminal in the root directory, we can run the following command to start up all three subgraphs at once.

npm run launch-subgraphs

Task!

We'll start up our gateway server in the next section when our graph is set up in Studio.

Managed federation

To maximize our use of Federation 2 features, we'll want to set up our FlyBy app with managed federation. This means that we'll register all of our subgraph schemas in Apollo Studio, and direct our gateway server to consume the supergraph schema that results from composing them together.

Authenticating your graph

Use the list below to check your work as you go along.

Managed federation checklist: Part 1

Once you've created your graph, you'll see a new screen that allows you to define the version of Federation that Studio should use to build the supergraph. To use Federation 2 in this lab, update the Supergraph Pipeline Track dropdown to use the Federation 2 Supergraph option.

studio.apollographql.com
The Publish your schema with Federation modal, highlighting the Federation 2 Supergraph option for the Supergraph Pipeline Track

Managed federation checklist: Part 2

Publishing the subgraphs

Now we're ready to publish the latest version of each subgraph schema to the Apollo schema registry. Use the below command as reference for the next group of tasks.

rover subgraph publish <APOLLO_GRAPH_REF> \
--name <SUBGRAPH_NAME> \
--schema <SUBGRAPH_SCHEMA_FILE> \
--routing-url <SUBGRAPH_URL>

Take note that you will need to provide your unique APOLLO_GRAPH_REF to the rover subgraph publish command in each of the following tasks.

--name--schema--routing-url
locations./subgraph-locations/locations.graphqlhttp://localhost:4001
activities./subgraph-activities/activities.graphqlhttp://localhost:4003
reviews./subgraph-reviews/reviews.graphqlhttp://localhost:4002

Publishing subgraphs

Launching the gateway

With our graph's environment variables saved and all three subgraphs published, our gateway is ready to use the supergraph schema. Let's hook up our gateway connection in Studio and start the server.

Connecting the gateway

Launching the frontend

Next, we'll start up the client-side app and check that our frontend requests can connect to the gateway.

Task!

http://localhost:3000
The landing page for our new and improved app: FlyBy!

Key takeaways

  • Adding a Federation 2 definition to the top of our schema file allows it to use new features and syntax.
  • Setting a graph's supergraph pipeline to use Federation 2 enables Studio to compose the supergraph from schemas that use the latest features and syntax.
Previous
Next