hasura / graphql-joins-example

Hasura GraphQL Joins Example

An example of joining two GraphQL schemas, a store service and a fulfillment service, with Hasura. Both services were made with GraphQL Code Generator and GraphQL Yoga.

View the example here: https://cloud.hasura.io/public/graphiql?endpoint=https://present-hyena-89.hasura.app/v1/graphql

Run Example With Hasura Cloud

1. Deploy the fulfillment and store service to any online host.

2. In your Hasura Cloud project, add the FULFILLMENT_SERVICE_URL and STORE_SERVICE_URL enviroment variables. Also add a database named default.

3. Using the Hasura CLI, apply the metadata to your Cloud project:

   hasura metadata apply --project hasura --endpoint <Hasura Cloud endpoint> --admin-secret <Hasura Cloud admin secret>

Run Example With Docker Compose

docker compose up -d --build

Then navigate to http://localhost:8080/console

Store Service

The store service is an example of an ecommerce 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 Schemas

Using Hasura GraphQL Joins we can combine the schemas together! From the fulfillment schema orderId key we join order information from store schema using the order type ID field. Without any code we have joined two separate services!

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

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