As applications grow in complexity, it can become challenging to manage a single, monolithic GraphQL schema that serves all the data needs of an application.

We now have GraphQL Federation, a powerful tool for content serving that allows you to combine multiple GraphQL APIs into a single, unified schema.

In this tutorial, you'll explore the ins and outs of GraphQL Federation and how it can revolutionize the way you build digital products.

A Brief History of Content Serving

Before the advent of GraphQL Federation, there were two primary approaches to content serving: monolithic and microservices. The monolithic approach involved building a single, large API that handled all the data needs of an application. While this approach is straightforward to implement, it can become unwieldy as the API grows in complexity, making it challenging to maintain and scale.

The microservices approach, on the other hand, involves breaking the API down into smaller, independent services that handle specific data needs. This approach can be more scalable and maintainable, but it also introduces more complexity and overhead, as each service needs to be managed independently.

GraphQL Federation provides a middle ground between these two approaches, allowing developers to split their API into smaller, independent services while maintaining a single, unified schema.

The Origins of Federation

GraphQL Federation was introduced in 2018 by the Apollo team as a way to manage large, distributed GraphQL schemas. Federation allows developers to split a large GraphQL schema into smaller subgraphs that can be developed and maintained independently.

Before federation, schema stitching was one approach to splitting a large GraphQL schema. Schema stitching involves combining multiple GraphQL schemas into a single schema. However, this approach can be challenging to implement and can introduce performance issues if not done correctly.

GraphQL Federation takes a different approach. Rather than combining multiple schemas into a single schema, federation splits a large schema into smaller, independent subgraphs.

What is GraphQL Federation?

GraphQL Federation is a way to split a large GraphQL schema into multiple smaller schemas, each representing a different part of the overall API. These smaller schemas are called "subgraphs". They can be developed and maintained independently by different teams or services.

The main benefits of using GraphQL Federation are:

• Increased flexibility: By splitting the schema into smaller subgraphs, developers can make changes to the API more easily and without affecting other parts of the schema.
• Scalability: As the API grows in complexity, it can become challenging to manage a single, monolithic schema. With GraphQL Federation, developers can split the schema into smaller, more manageable parts that can be scaled independently.
• Better separation of concerns: By delegating parts of the schema to other services, developers can focus on their areas of expertise and not worry about the implementation details of other API parts.

How To Implement Federation With Hygraph

Hygraph is a federated content management platform that enables teams to provide content to any channel. If this is your first time exploring Hygraph, create a free-forever developer account here.

Here are the steps you will follow to implement federation with Hygraph:

1. Define the Federated Schema: To define the Federated Schema with Hygraph, you need to create multiple smaller schemas for each service. This allows you to split a large schema into smaller ones that can be more easily managed. For example, you might create a schema for your blog service, a schema for your product service, and a schema for your user service.
2. Configure the Services: Configure each service with its own https://hygraph.com/docs/getting-started), you can create custom content types, fields, and relationships for each service. This allows you to customize each service to meet your specific needs.
3. Create a Gateway: Create a Gateway to route queries to the appropriate services and aggregate the results into a single response. Hygraph provides a built-in Gateway that you can use to route queries to your services. Once you have done this, you can send queries to your Gateway and receive responses.

Hygraph Federation Implementation Example

For this article, you will learn how to combine an external GraphQL API (Cocktail API) into your Hygraph project and query for data with a single GraphQL query.

This service has already been configured and can be queried independently, but with GraphQL federation, you can bring it into a parent schema.

Step 1: Add a remote source

The first step is to add a remote source, specify the type of the API, name and paste the API address:

Step 2: Create a GraphQL remote field

Create a field for the data you will use to query for a particular cocktail. For this, I will create two fields, the "Best cocktail" field for you to submit the best cocktail of the author, then a slug field (Cocktail Slug) that will automatically convert the "Best cocktail" data to slug.

You can now create the GraphQL remote field to query for a particular cocktail with the slug value.

Step 3: Test the remote source

You have created a GraphQL remote field for the cocktail Info. Let's now test it by adding the author's best cocktail, which would generate a slug value, and then you can use it to get the particular cocktail information.

At this point, you have successfully added and combined multiple remote sources into your Hygraph project.

Let's now create a GraphQL query to fetch the author's data, including the author's best cocktail, ingredients, and instructions for making it.

query AuthorsInfo {
  authors {
    firstName
    lastName
    bio
    bestCocktail
    cocktailInfo {
      info
      ingredients
      instructions
    }
  }
}

This will return all the various values, including the ones from the remote sources, directly into this GraphQL query:

{
  "data": {
    "authors": [
      {
        "firstName": "John ",
        "lastName": "Doe",
        "bio": null,
        "bestCocktail": "paloma",
        "cocktailInfo": {
          "info": "Alcoholic",
          "ingredients": "Grape Soda Tequila",
          "instructions": "Stir Together And Serve Over Ice."
        }
      }
    ]
  }
}

This is one of the superpowers that Hygraph possesses, and GraphQL provides. You can explore more by reading the remote sources documentation and this article on How to run multiple GraphQL queries and combine multiple sources.

Conclusion

GraphQL Federation is a powerful technology revolutionizing how web applications query and serve data.

By allowing multiple services to work together as a single, cohesive unit, Federation improves performance, scalability, and reliability.

While some challenges are associated with using Federation, developers can overcome these challenges by carefully planning the system architecture, using version control, and monitoring performance.

With these tips in mind, developers can leverage the power of GraphQL Federation to build complex, distributed systems that meet the needs of modern web applications.