Combine Multiple GraphQL APIs using Hasura's GraphQL Joins

The Hasura GraphQL Joins feature, also know as Remote Schema to Remote Schema (RS-RS) joins, enables you to create a unified GraphQL API by joining the data from different GraphQL sources.

With GraphQL Joins, you can federate your queries and mutations across multiple GraphQL services as if they were a single GraphQL schema. You do not have to write extra code or change the underlying APIs.

There are four types of Joins with Hasura:

• Remote Schema to Remote Schema (RS-to-RS) Joins
• Database to Database (DB-to-DB) Joins
• Database to Remote Schema (DB-to RS) Joins
• Remote Schema to Database (RS-to-DB) Joins

This article will teach you about Remote Schema to Remote Schema GraphQL Joins.

Remote Schema to Remote Schema Joins allow you to combine multiple GraphQL APIs via user-defined relationships.

This feature lets you easily create integrations as more companies adopt GraphQL.

In our example, we create a store service for handling orders and a fulfillment service for handling shipping. We use GraphQL Code Generator and GraphQL Yoga.

Store Service

The store service is an example of an e-commerce schema with items and orders containing items

type Item {
  id: Int!
  name: String!
  price: Float!
}

type LineItem {
  quantity: Int!
  itemId: Int!
  item: Item
}

type Order {
  id: Int!
  lineItems: [LineItem!]!
}

type Query {
  item(id: Int!): Item
  items: [Item!]!
  order(id: Int!): Order
  orders: [Order]!
}

Fulfillment Service

The fulfillment service is an example of a shipping company schema, with each fulfillment having an order ID and a status

enum Status {
  PACKING
  SHIPPED
  DELIVERED
}

type Fulfillment {
  id: Int!
  orderId: Int!
  status: Status!
}

type Query {
  fulfillment(orderId: Int!): Fulfillment!
  fulfillments: [Fulfillment]!
}

Joining the Remote Schemas

Once we add the services as remote schemas, we can create a relationship using GraphQL Joins.

By mapping the store schemas orderId to the fulfillment schemas order type, we can join the two services with no code! Also, we didn't have to modify the original APIs.

The query

{
  fulfillment(orderId: 1) {
    status
    order {
      lineItems {
        item {
          name
        }
      }
    }
  }
}

gives us

{
  "data": {
    "fulfillment": {
      "status": "PACKING",
      "order": {
        "lineItems": [
          {
            "item": {
              "name": "Sunglasses"
            }
          }
        ]
      }
    }
  }
}

Enjoy!