Blazing fast, instant realtime GraphQL APIs on your DB with fine grained access control, also trigger webhooks on database events.
Go to file
Matthew Goodwin b3b9ff269a console: GQL Customization while tracking a table
## Description 🔖

This adds the ability to "customize & track" using the [new tracking ui](https://github.com/hasura/graphql-engine-mono/pull/5391).

A new button was added to implement this:

<img width="870" alt="Screen Shot 2022-09-16 at 12 37 14 PM" src="https://user-images.githubusercontent.com/49927862/190701948-1ad86717-f6be-4f67-8e0c-17b618790795.png">

## Solution and Design 🎨

This feature mostly makes use of components and hooks already created.

I was able to refactor some code to reduce code duplication and type duplication.

A few highlights on the refactor:

- `useTrackTable`, `useUntrackTable` and `useTrackSelectedTables` were all refactored into a single hook: `useTrackTable`. This hook has one main function but returns 4 wrapper functions: `trackTable`, `untrackTable`, `trackTables`, and `untrackTables`. This should make maintaining easier in the future.
- Synced up types between `MetadataTableConfig` and the customization form. Previously, the customization form had duplicated this same type, and there was some slight discrepancies between them.
- Modified `TableTrackingCustomizationModal` `onSubmit` return with a 2nd argument that's in the exact shape of `MetadataTableConfig` for convenience.
- Did some refactoring of the `DropDownMenu` component that should not interfere with anything. Exposed a few of the inner components for export and used these modular pieces in the current implementation. This ended up not being used in the feature, but left it in as it's a slight improvement.

I also added a function called `delayAsyncAction` [here](5e88262628/console/src/components/Common/utils/jsUtils.tsx (L416)) to create an artificial delay for `async` functions. This allows us to create a more confident UX when requests happen near-instantly. Introducing a tiny delay of around 300ms with good UI feedback (i.e. loading spinner) shows the user something is happening. I wanted to document this as I'm not sure it's something other will agree on. If it's against our UX philosophy, I can remove it, but I found it nice.

## Review Setup 💻

1. Run the code locally and go to `http://localhost:3000/data/v2/manage?database=YOUR_DATABASE_NAME_HERE`
2. You should see the new button as shown above to `Customize & Track`
3. Try it out with various field custom roots
4. Also try tracking and untracking tables both from the individual rows as well as the checkboxes as this logic was also modified in the refactor.

 ** I am not totally sure how much I need to put here for testing, I may want some help here from the team. **

## Review checklist. 📋

### Functionality

- [ ] Steps to verify console behaviour

### Tests

Going to open another PR for adding testing to the relevant areas. Will update this PR with a link once that's been done.

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/5922
GitOrigin-RevId: e7c14be5b9bcc255a7b9ecfd43f1f84aa8aabba2
2022-09-26 22:02:40 +00:00
.circleci Create a Docker image specifically for running the Python tests. 2022-09-07 14:29:42 +00:00
.github ci: remove changelog check and introduce changelog in PR template 2022-08-22 04:44:47 +00:00
architecture Streaming sub architecture post updates 2022-09-12 19:33:42 +00:00
assets updated readme gif 2022-02-24 09:38:54 +00:00
cabal server: more GHC 9.2 changes compatible with 8.10 (#3550) 2022-07-07 16:51:18 +00:00
cli cli: [rfc] improve error handling 2022-09-21 08:29:37 +00:00
cli-ext ci: add action to release cli-ext binaries 2022-06-07 22:25:41 +00:00
community community: add streaming chat hostname env variable to streaming chat sample app 2022-09-01 12:36:36 +00:00
console console: GQL Customization while tracking a table 2022-09-26 22:02:40 +00:00
contrib/metadata-types contrib: Metadata V3 types + JSON Schema 2021-11-10 05:37:11 +00:00
dc-agents console: GQL Customization while tracking a table 2022-09-26 22:02:40 +00:00
docker-compose server/tests-hspec: Simplifying the steps required to run these on macOS on aarch64. 2022-09-21 16:48:21 +00:00
docs server: feature flag for disabling TABLE_updates fields 2022-09-26 13:25:37 +00:00
docs-old docs : remove under preview section from github docs 2022-06-28 15:06:42 +00:00
frontend console: GQL Customization while tracking a table 2022-09-26 22:02:40 +00:00
install-manifests Docs / Install-Manifests: Fix Azure Deployment Buttons 2022-09-22 20:30:05 +00:00
packaging ci: changes for enabling the release of EE lite 2022-08-29 05:20:24 +00:00
rfcs server/rfc: Computed fields in order by/filter/permission 2022-08-22 05:31:20 +00:00
scripts server/tests-hspec: Simplifying the steps required to run these on macOS on aarch64. 2022-09-21 16:48:21 +00:00
server server: feature flag for disabling TABLE_updates fields 2022-09-26 13:25:37 +00:00
translations docs: add chinese translation for live-queries.md 2022-04-29 08:21:38 +00:00
.dockerignore Create a Docker image specifically for running the Python tests. 2022-09-07 14:29:42 +00:00
.envrc.local.example Tidy up the .envrc file a little. 2022-09-14 20:40:10 +00:00
.ghcversion tooling: provide optional use_ghcup in .envrc 2022-06-22 13:14:30 +00:00
.git-blame-ignore-revs Added a .git-blame-ignore-revs file 2021-10-27 18:17:16 +00:00
.gitignore server: address recent graphql-ws related bugs 2021-11-04 12:40:02 +00:00
.hlint.yaml Remove or ignore all instances of unsafeMkName. 2022-07-18 17:02:15 +00:00
.kodiak.toml ci: sets include_pr_number kodiak config to false (#1569) 2021-06-14 15:21:56 +00:00
.nvmrc tooling: bump .nvmrc version to 16 2022-09-06 11:23:56 +00:00
.prettierignore Add a missing changelog entry for error message changes to v2.10.0. 2022-09-05 09:41:06 +00:00
cabal.project server: merge graphql-parser-hs into the monorepo 2022-09-26 11:23:37 +00:00
cabal.project.freeze Replace Hasura.RQL.Types.Numeric with refined 2022-09-21 18:03:04 +00:00
CHANGELOG.md Kriti Documentation 2022-09-06 15:47:18 +00:00
code-of-conduct.md update code of conduct (#2886) 2019-09-16 14:07:52 +05:30
CONTRIBUTING.md community: update contrib guide (#5866) 2020-10-01 10:03:30 +02:00
docker-compose.yml server/tests-hspec: Simplifying the steps required to run these on macOS on aarch64. 2022-09-21 16:48:21 +00:00
event-triggers.md docs: update the hasura sample apps links 2022-02-18 17:06:46 +00:00
LICENSE Change license for core GraphQL Engine to Apache 2.0 (#1821) 2019-03-19 16:23:36 +05:30
LICENSE-community add community boilerplates and examples (#430) 2018-09-13 12:00:07 +05:30
Makefile server: Use make to simplify tests-py venv generation. 2022-07-25 20:05:49 +00:00
package-lock.json console: Update Cypress to v10 and run the migration guide 2022-07-05 08:51:35 +00:00
README.md docs: update the hasura sample apps links 2022-02-18 17:06:46 +00:00
remote-schemas.md update docs link to avoid redirects 2021-03-01 18:51:18 +00:00
sample.hie.yaml server: Move the schema parsers to their own library. 2022-08-05 13:53:39 +00:00
SECURITY.md translation(hindi): add security.md (#3162) 2020-01-05 11:32:23 +05:30
weeder.dhall remove homebrew NESeq, use vendored 2022-07-19 08:42:28 +00:00

Hasura GraphQL Engine

Latest release Docs

Hasura is an open source product that accelerates API development by 10x by giving you GraphQL or REST APIs with built in authorization on your data, instantly.

Read more at hasura.io and the docs.


Hasura GraphQL Engine Demo


Hasura GraphQL Engine Realtime Demo


Features

  • Make powerful queries: Built-in filtering, pagination, pattern search, bulk insert, update, delete mutations
  • Works with existing, live databases: Point it to an existing database to instantly get a ready-to-use GraphQL API
  • Realtime: Convert any GraphQL query to a live query by using subscriptions
  • Merge remote schemas: Access custom GraphQL schemas for business logic via a single GraphQL Engine endpoint. Read more.
  • Extend with Actions: Write REST APIs to extend Hasuras schema with custom business logic.
  • Trigger webhooks or serverless functions: On Postgres insert/update/delete events (read more)
  • Scheduled Triggers: Execute custom business logic at specific points in time using a cron config or a one-off event.
  • Fine-grained access control: Dynamic access control that integrates with your auth system (eg: auth0, firebase-auth)
  • Admin UI & Migrations: Admin UI & Rails-inspired schema migrations
  • Supported Databases: Supports PostgreSQL (and its flavours), MS SQL Server and Big Query. Support for more databases coming soon.

Read more at hasura.io and the docs.

Table of contents

Table of Contents

Quickstart:

One-click deployment on Hasura Cloud

The fastest and easiest way to try Hasura out is via Hasura Cloud.

  1. Click on the following button to deploy GraphQL engine on Hasura Cloud including Postgres add-on or using an existing Postgres database:

    Deploy to Hasura Cloud

  2. Open the Hasura console

    Click on the button "Launch console" to open the Hasura console.

  3. Make your first GraphQL query

    Create a table and instantly run your first query. Follow this simple guide.

Other one-click deployment options

Check out the instructions for the following one-click deployment options:

Infra provider One-click link Additional information
Heroku Deploy to Heroku docs
DigitalOcean Deploy to DigitalOcean docs
Azure Deploy to Azure docs
Render Deploy to Render docs

Other deployment methods

For Docker-based deployment and advanced configuration options, see deployment guides or install manifests.

Architecture

The Hasura GraphQL Engine fronts a Postgres database instance and can accept GraphQL requests from your client apps. It can be configured to work with your existing auth system and can handle access control using field-level rules with dynamic variables from your auth system.

You can also merge remote GraphQL schemas and provide a unified GraphQL API.

Hasura GraphQL Engine architecture

Client-side tooling

Hasura works with any GraphQL client. See awesome-graphql for a list of clients. Our frontend tutorial series also have integrations with GraphQL clients for different frameworks.

Add business logic

GraphQL Engine provides easy-to-reason, scalable and performant methods for adding custom business logic to your backend:

Remote schemas

Add custom resolvers in a remote schema in addition to Hasura's database-based GraphQL schema. Ideal for use-cases like implementing a payment API, or querying data that is not in your database - read more.

Actions

Actions are a way to extend Hasuras schema with custom business logic using custom queries and mutations. Actions can be added to Hasura to handle various use cases such as data validation, data enrichment from external sources and any other complex business logic - read more

Trigger webhooks on database events

Add asynchronous business logic that is triggered based on database events. Ideal for notifications, data-pipelines from Postgres or asynchronous processing - read more.

Derived data or data transformations

Transform data in Postgres or run business logic on it to derive another dataset that can be queried using GraphQL Engine - read more.

Demos

Check out all the example applications in the community/sample-apps directory.

Realtime applications

  • Group Chat application built with React, includes a typing indicator, online users & new message notifications.

  • Live location tracking app that shows a running vehicle changing current GPS coordinates moving on a map.

  • A realtime dashboard for data aggregations on continuously changing data.

Videos

Support & Troubleshooting

The documentation and community will help you troubleshoot most issues. If you have encountered a bug or need to get in touch with us, you can contact us using one of the following channels:

We are committed to fostering an open and welcoming environment in the community. Please see the Code of Conduct.

If you want to report a security issue, please read this.

Stay up to date

We release new features every month. Sign up for our newsletter by using the link below. We send newsletters only once a month. https://hasura.io/newsletter/

Contributing

Check out our contributing guide for more details.

Brand assets

Hasura brand assets (logos, the Hasura mascot, powered by badges etc.) can be found in the assets/brand folder. Feel free to use them in your application/website etc. We'd be thrilled if you add the "Powered by Hasura" badge to your applications built using Hasura. ❤️

<!-- For light backgrounds -->
<a href="https://hasura.io">
  <img width="150px" src="https://graphql-engine-cdn.hasura.io/img/powered_by_hasura_primary_darkbg.svg" />
</a>

<!-- For dark backgrounds -->
<a href="https://hasura.io">
  <img width="150px" src="https://graphql-engine-cdn.hasura.io/img/powered_by_hasura_primary_lightbg.svg" />
</a>

License

The core GraphQL Engine is available under the Apache License 2.0 (Apache-2.0).

All other contents (except those in server, cli and console directories) are available under the MIT License. This includes everything in the docs and community directories.

Translations

This readme is available in the following translations:

Translations for other files can be found here.