This post was originally published on my website.
In this post, we will look at how I set up and use Hasura graphql engine for local
development with pgadmin4 and pldbgapi (pldebugger).
- This setup uses Hasura cli to generate postgres migrations and hasura metadata.
- For debugging and other administrative operations, this setup uses pgAdmin4 with pldbgapi.
- You can check this sample project to get a better idea.
Hasura Cli setup
To create a fresh hasura project, run
hasura init. This will create a folder with the name you provide. Inside this folder, it creates many subfolders for managing different components of your hasura server.
The project structure looks like this:
. ├── config.yaml # main config file ├── metadata # hasura metadata │ ├── actions.graphql │ ├── actions.yaml │ ├── allow_list.yaml │ ├── cron_triggers.yaml │ ├── functions.yaml │ ├── query_collections.yaml │ ├── remote_schemas.yaml │ ├── tables.yaml │ └── version.yaml ├── migrations # postgres migrations └── seeds 3 directories, 10 files
The default config assumes you are running the graphql-engine at port 8080. You can change this setting in
Hasura local server with docker-compose
To easily spin up many containers for postgres, hasura and pgadmin, I am using docker-compose.
docker-compose.yml file looks like this:
version: '3.6' services: db: build: context: . dockerfile: Dockerfile.postgres image: postgres:13 restart: always volumes: - db_volume:/var/lib/postgresql/data environment: POSTGRES_USER: siddhant # default postgres superuse POSTGRES_PASSWORD: passwd # password for siddhant POSTGRES_DB: hasura_db hasura: image: hasura/graphql-engine:latest ports: - "8080:8080" # default port expected by hasura cli depends_on: - "db" restart: always environment: HASURA_GRAPHQL_DATABASE_URL: postgres://siddhant:passwd@db:5432/hasura_db ## enable the console served by server HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console ## enable debugging mode. It is recommended to disable this in production HASURA_GRAPHQL_DEV_MODE: "true" HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log ## uncomment next line to set an admin secret # HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey pgadmin: image: dpage/pgadmin4 restart: always environment: PGADMIN_DEFAULT_EMAIL: firstname.lastname@example.org PGADMIN_DEFAULT_PASSWORD: passwd ports: - "9090:80" volumes: - pgadmin_volume:/var/lib/pgadmin volumes: db_volume: pgadmin_volume:
Some important things in this docker-compose file:
dbuses postgres:13 official docker image with a custom Dockerfile to build this image. This custom Dockerfile.postgres installs pldebugger extension for debugging procedural code. The code for this Dockerfile.postgres looks like this:
FROM postgres:latest ENV PG_MAJOR 13 ENV PG_FULL 13.1 # Install the postgresql debugger RUN apt-get update \ && apt-get install -y --no-install-recommends \ postgresql-$PG_MAJOR-pldebugger EXPOSE 5432
To enable this extension you need to run
CREATE EXTENSION pldbgapi; in your postgres instance.
hasurauses the hasura-graphql-engine provided by Hasura.
We are also exposing port 8080 so that this server is accessible by our hasura cli's console server.
pgadminuse the dpage/pgadmin4 docker image.
To use pgadmin we are exposing port 80 as 9090 on our system.
That's it :)
Now you can use this setup by running the command
docker-compose up -d inside the project folder.
This command will start all three services for us to use.
To access the hasura, console run
hasura console command inside the project file.
This command will start a hasura console server that will record all your actions and update the
migrations and other folders accordingly.
To access pgadmin, you can go to
localhost:9090 on your browser.
You can log in with the email and password you set in the docker-compose file. Also, for debugging your procedural inside pgadmin, read the docs here https://www.pgadmin.org/docs/pgadmin4/latest/debugger.html
CREATE EXTENSION pldbgapi;inside your postgres instance to enable the pldebugger extension.
Follow me on twitter: @siddhantk232
Top comments (0)