Create Subgraphs

With our app subgraph taken care of, we can now create subgraphs for each of the remaining teams in our organization. We'll start by creating a subgraph for the product_management team.

The pattern we'll use for each of these teams is to:

  • create the new subgraph on Hasura DDN using the CLI.
  • connect the data source using the CLI.
  • add the subgraph to our base supergraph manifest.
  • scaffold the metadata using the CLI.
  • create relationships across the supergraph using the LSP extension.

Create the product_management subgraph

Let's start by killing dev mode by pressing CTRL+C in our terminal. Then, create a new subgraph for the product_management team by running the following command:

Create the product_management subgraph

ddn create subgraph product_management

And then add the connector manifest:

ddn add connector-manifest pg_db --subgraph product_management --hub-connector hasura/postgres --type cloud

This adds a new subgraph named product_management and tells the build process to look for metadata in this directory. When we connected the data source, the CLI created a new directory product_management/pg_db and added a pg_db.build.hml file to its connectors subdirectory. This file, along with the configuration.json contains the configuration and metadata for the PostgreSQL connector.

Connect the data source

We can then connect the data source using our environment variables and supergraph manifest:

supergraph: {}
subgraphs:
app:
PG_DB_CONNECTION_URI: "postgres://user:[email protected].<REGION>.ngrok.io:<PORT>/user_experience"
product_management:
PG_DB_CONNECTION_URI: "postgres://user:[email protected].<REGION>.ngrok.io:<PORT>/product_management"

In your /product_management/pg_db/connector/pg_db.build.hml file, update the referenced value to match the new environment variable:

# other configuration above
CONNECTION_URI:
valueFromEnv: PG_DB_CONNECTION_URI

Scaffold the metadata

As we did with the app subgraph, we'll use the CLI to scaffold the metadata for the product_management subgraph. Remember, when we run ddn dev, the CLI will automatically introspect our data source, track all tables as models, and create relationships based on foreign keys.

Start dev mode:

ddn dev

We can now navigate to our project's Console and query data in our product_management subgraph using our API:

query ProductsAndSupplierQuery {
productManagement_products {
id
name
price
supplier {
supplierId
name
}
}
}

Below, you'll find the abbreviated steps for adding our remaining subgraphs.

Create the payment_processing and fulfillment_services subgraphs

As before, let's kill dev mode using CTRL+C before running the following commands.

Create a new subgraph for the payment_processing and fulfillment_services teams by running the following commands:

ddn create subgraph payment_processing
ddn create subgraph fulfillment_services

And then add the connector manifests:

ddn add connector-manifest pg_db --subgraph payment_processing --hub-connector hasura/postgres --type cloud
ddn add connector-manifest pg_db --subgraph fulfillment_services --hub-connector hasura/postgres --type cloud

Update the environment variables

supergraph: {}
subgraphs:
app:
PG_DB_CONNECTION_URI: "postgres://user:[email protected].<REGION>.ngrok.io:<PORT>/user_experience"
product_management:
PG_DB_CONNECTION_URI: "postgres://user:[email protected].<REGION>.ngrok.io:<PORT>/product_management"
payment_processing:
PG_DB_CONNECTION_URI: "postgres://user:[email protected].<REGION>.ngrok.io:<PORT>/payment_processing"
fulfillment_services:
PG_DB_CONNECTION_URI: "postgres://user:[email protected].<REGION>.ngrok.io:<PORT>/fulfillment_services"

Update the build manifests

For each of the new connectors, update its build manifest to include the new environment variable. You'll modify both payment_processing.build.hml and fulfillment_services.build.hml to include their respective PG_DB_CONNECTION_URI:

# other configuration above
CONNECTION_URI:
valueFromEnv: PG_DB_CONNECTION_URI

Now, re-start dev mode by running:

ddn dev

At this point, your supergraph should look like this:

Supergraph without relationships

Next steps

In the next section, we'll create relationships between our subgraphs.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin