Connect a Data Source

Connect a data source to the default subgraph

As the CLI created our app subgraph when we initialized our project, we can connect a data source to it right away. Our compose file exposes the ports for our databases on the host machine, so we can connect to them directly. The ux team's data source is a PostgreSQL database which we can add to our app subgraph with the following command:

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

This command will add a new data source to our app subgraph using the hasura/postgres connector.

We'll also need to add the connection string for this new source. We can do this through the use of environment variables by referencing the connection strings we generated earlier using ngrok, and make our base.env.yaml file look like this:

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

Next, update your /app/pg_db/connector/pg_db.build.hml file to reference this new environment variable:

Copy
# other configuration above
CONNECTION_URI:
  valueFromEnv: PG_DB_CONNECTION_URI

Scaffold the UX metadata

By starting the CLI's dev mode, we'll automatically be able to track all tables as models and expose them in our API. Run the following command:

Copy
ddn dev

This will create the types for each table in our database, add them to our metadata, and also create named files for each model in our /app/pg_db/models directory.

As this has altered our metadata, the CLI will automatically detect changes and create a new build for our project. If you check your terminal, you'll see output displaying information about the build. Head to the Console and you'll see that we now have models for each table in our database.

We can even run a query like this across tables as Hasura was able to determine the relationships between them:

Copy
query SimpleUsersQuery {
  app_users {
    id
    email
    userPreferences {
      userId
      preferences
    }
  }
}

You can also visit the Explorer tab to see a visual representation of our supergraph. Right now, it's not very exciting as we only have one subgraph and it only has one data source. However, as we add more subgraphs and connect them to our supergraph, this will become a very useful tool.