Skip to content

qlstico/QL

Repository files navigation

PRs Welcome License: MIT

SeeQL Title


Welcome to QLStico(beta): An easy-to-use desktop application that helps you visualize your databases, tables, and data in both a GUI format as well as through the power of GraphQL.

Getting Started

Requirements

MacOS, Linux, and Unix OS' are supported - all you need is Postgres installed on your machine!

How to Install

Beta Release 0.0.1

From the terminal, run:

git clone https://github.com/qlstico/QL.git
cd ql
yarn
yarn start

Features

Creating a Connection

Upon opening the app, you will be brought to your Connections page:

First Connection

You have the option to specify a Postgres connection you wish to create and store via the Create Connection button. By default, the User and Host fields are pre-populated with your OS's currently logged in username and localhost, respectively. In most cases, unless you have password protected databases or proctected connections, this should be good enough to hit submit and create a valid connection configuration. Otherwise, feel free to provide a Password and/or a different Host to connect to (default port is 5432).

Create Connection

After submitting a connection configuration, you are brought back to the Connections page where your creating configuration is stored as a tile for future use. You may have several connection configurations that will all exist as their own tile. Hit Connect on any existing connection tile to use that connection configuration.

Connection Tile

Editing a Connection

You always have the option to Edit existing connections or Remove them right from their respective tile's buttons!

Viewing Databases

After establishing a valid connection, you will see all your PG databases rendered as tiles. Double-click any tile to enter the database of choice!

View All Dbs

Adding/Deleting Databases

You have the option of pressing the Add A Database button at any time while on this page. This will prompt you to provide a database name to create.

You also have the option of deleting a database by single-clicking to select it (indicated with dark grey background behind tile), and the Remove Database will apear at the top of the page. Clicking this will delete the selected database.

Add or Delete DB

Viewing Tables

You are able to view all tables contained by a database. You may double-click on any of these tiles to enter the table and see it's contents.

All Tables

Adding/Deleting Tables

Similar to adding/deleting databases, you can add or delete a table to the database by pressing the corresponding Add a Table or Remove Table buttons (deletion option available upon single-clicking a table to select it).

Generating GraphQL Queries & Mutations

At the top of the all tables view, there are corresponding GraphQL Queries and Visualize Schema buttons. Clicking the GraphQL Queries button will open a seperate window with a PostGraphiQL IDE which represents you database tables in a GraphQL queriable format.

You can write a GraphQL query or GraphQL mutation in the lefthand input section, and once your command is complete, click Play button near top. If your query has any errors, an error message will display telling you exactly where the error occured.

PostGraphiQL Window

After clicking Play, you will be able to see your results in the righthand Results section. Additionally, the Docs and Explorer buttons will reveal helpful information to help contruct GraphQL queries.

Visualizing GraphQL Schema

Next to the GraphQL Queries button, the Visualize Schema button will open a new window that shows a visual representation of the current database's table relations. These are generated using the same GraphQL schema used for the PostGraphiQL IDE.

Voyager Schema Visualizer

Table Contents Grid View

Upon entering a table, a grid is generated comprised of all of it's contents. You may single-click to select a row, prompting the Remove Row button to appear to give the option of deletion.

Table Grid View

Double-clicking a row sets that row into edit mode for you to modify any of the row's contents. Upon changing any item(s), you may hit submit to update your table with these changes. Any errors in updating will be reported back to you.

Submission Error

Resources

Built on Electron, React and Postgraphile.

Creators: Ricardo Pineda, Jack Dwyer, William Golden, Sri Velagapudi