Docs
Launch GraphOS Studio

Federation quickstart

Part 4 - Working with subgraphs


In the previous parts of this quickstart, we used Apollo-hosted services for our s. Now, let's see what we can do with our own s.

Our s can use any library that supports . This includes , along with the other libraries listed in Federation-compatible subgraph implementations.

1. Configure Apollo Server

If you're using a besides , consult its documentation to learn how to configure it for use as a .

If you have an existing API that uses , you can use that server as a with the @apollo/subgraph library. You can get started with this example server (which is not yet federated).

First, install the latest version of @apollo/subgraph and graphql-tag into your project:

npm install @apollo/subgraph graphql-tag

Import the gql tag into the file where you create your schema (index.ts for our example), and wrap your schema in that tag, like so:

index.ts
import gql from 'graphql-tag';
const typeDefs = gql`
type Book {
title: String
author: String
}
type Query {
books: [Book]
}
`;
index.js
import gql from 'graphql-tag';
const typeDefs = gql`
type Book {
title: String
author: String
}
type Query {
books: [Book]
}
`;

We wrap our schema in the gql tag to convert it into an AST (i.e., DocumentNode). We do this because the buildSubgraphSchema function below requires the schema we pass in to be a DocumentNode type.

Next, import the buildSubgraphSchema function in the file where you initialize ApolloServer:

index.ts
import { buildSubgraphSchema } from '@apollo/subgraph';
index.js
import { buildSubgraphSchema } from '@apollo/subgraph';

Finally, modify your ApolloServer constructor by passing it a schema option instead of typeDefs and resolvers, like so:

index.ts
const server = new ApolloServer({
schema: buildSubgraphSchema({ typeDefs, resolvers }),
});
index.js
const server = new ApolloServer({
schema: buildSubgraphSchema({ typeDefs, resolvers }),
});

(As shown, you now pass your typeDefs and resolvers to buildSubgraphSchema.)

And that's it! You can now perform all of the same setup on your own service (schema publishing, , etc.) that you did with the Apollo-hosted services we used in the previous parts. Refer to those parts for guidance.

2. Learn about federated types

In a federated , each 's schema can define or reference types and s that are also present in another 's schema.

Consider the Location type in our composed from Part 3. This type includes the following s:

type Location
@join__type(graph: LOCATIONS, key: "id")
@join__type(graph: REVIEWS, key: "id")
{
id: ID!
"""The name of the location"""
name: String! @join__field(graph: LOCATIONS)
"""A short description about the location"""
description: String! @join__field(graph: LOCATIONS)
"""The location's main photo as a URL"""
photo: String! @join__field(graph: LOCATIONS)
"""The calculated overall rating based on all reviews"""
overallRating: Float @join__field(graph: REVIEWS)
"""All submitted reviews about this location"""
reviewsForLocation: [Review]! @join__field(graph: REVIEWS)
}

As the federation-specific @join__field suggests, these s of the same are defined across two different s!

This is possible because our Locations defines the Location as an entity. Entities are s that multiple s can contribute s to.

It makes logical sense that the reviews of a Location should be resolved by the Reviews instead of the Locations subgraph. This reflects the design principle of separation of concerns.

Learn how to work with entities.

3. Try out schema checks

After you've registered your first , you can try out one of Apollo Studio's most powerful features: schema checks.

With , you can check whether some changes you want to make to your schema will affect any of the existing clients that use your . This feature is at its most powerful in your CI/CD environment, where you can automatically detect breaking schema changes before they're deployed to production.

  1. Learn about the basics of schema checks
  2. Learn about using schema checks with Apollo Federation
  3. Learn how to use Rover in a CI/CD environment

Congratulations, you've completed the federation quickstart! If you have any feedback or suggestions for this tutorial, please click Rate article on the right.

Previous
3️⃣ Local composition
Next
Subgraphs
Edit on GitHubEditForumsDiscord