Skip to content

feat: integrate visual DQL query builder into Console - #428

Open
armanossiloko wants to merge 4 commits into
dgraph-io:mainfrom
armanossiloko:feat/console-dql-builder
Open

feat: integrate visual DQL query builder into Console#428
armanossiloko wants to merge 4 commits into
dgraph-io:mainfrom
armanossiloko:feat/console-dql-builder

Conversation

@armanossiloko

@armanossiloko armanossiloko commented Jul 31, 2026

Copy link
Copy Markdown

Description

Adds a Builder mode to the Console (alongside Query / Mutate) for visually constructing DQL from the connected Alpha’s types.

  • Schema loads automatically from the live database via schema { } (no separate “Load schema” UI).
  • Canvas builds DQL into Ratel’s existing CodeMirror editor and Variables panel; hand-edits debounce back onto the canvas.
  • Run / Clear use the normal Console chrome; results show in the existing right-hand pane.
  • Builder UI is styled to match Ratel’s light theme.
  • Fixes Webpack 5 process/browser resolution so newer react-draggable builds compile.
  • Stops the Variables button from replacing a non-empty query with the demo Star Wars template.

Checklist

  • Code compiles correctly and linting passes locally
  • Tests added for new functionality, or regression tests for bug fixes added as applicable

View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.

Add a Builder mode beside Query/Mutate that loads schema from the
connected Alpha, builds DQL on a canvas, and runs through the existing
Console results pane. Also fix Webpack 5 process/browser resolution for
newer react-draggable, and stop QueryVarsEditor from overwriting
non-empty queries with the demo template.

Co-authored-by: Cursor <cursoragent@cursor.com>
@armanossiloko
armanossiloko requested a review from a team as a code owner July 31, 2026 16:38
@armanossiloko

Copy link
Copy Markdown
Author

This is integrated into Ratel from a personal project of mine where I wanted a simple visual query builder, so figured having it in Ratel might come in handy. Example of this in action:

image

armanossiloko and others added 3 commits August 3, 2026 18:51
Format QueryBuilder sources with trunk fmt and remove dead code so the PR Code Quality check passes.

Co-authored-by: Cursor <cursoragent@cursor.com>
Emit selection fields in insertion order instead of schema order so hand-edited query text is not reshuffled on the next visual edit.

Co-authored-by: Cursor <cursoragent@cursor.com>
Parse #, //, and block comments onto operations and fields, then re-emit them when regenerating query text from the visual builder.

Co-authored-by: Cursor <cursoragent@cursor.com>
@matthewmcneely
matthewmcneely self-requested a review August 12, 2026 16:43
@matthewmcneely matthewmcneely self-assigned this Aug 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants