GraphQL is a query language for APIs that allows for engineers to customize their requests to ensure the data delivered is exactly what they need for their projects and nothing more. VisiQL was created by a small team of engineers who are passionate about encouraging other developers to get started with using GraphQL’s powerful abilities in their own projects. VisiQL accomplishes this by abstracting away the heavy lifting of creating the necessary schemas and resolvers for querying PostgreSQL databases with GraphQL, and providing sophisticated visualization tools to allow developers to easily customize and add to VisiQL’s generated code to save time standing up the rest of their queries.
Getting started with VisiQL is easy. Simply fork our repo, clone to your local machine, and install all dependencies. From there run:
npm run build
npm run dev
And your local instance of VisiQL will be running on port 8080.
Generating your GraphQL Code
Upon logging in or continuing as a guest, enter your desired PostgresQL database link in the textbox and click submit. Note that at this time, VisiQL was created to only support generating code for PostgresQL databases, but we welcome the Open Source community to add support for additional database types. Upon submission, you will see your database visualization and GraphQL schema generated and displayed instantly.
Toggle on the left hand side between the Schema and Resolvers tabs to review the code, or click the open button on the code editor to see both the generated Schema and Resolver in one view. You can also edit this generated code, right from within the editors and easily copy your changes.
Visualize your Database
On the left hand side, you will see a tree graph generated from your PostgresQL database. Click on the nodes to collapse and expand the table data and focus on only one part of your database. Or, use your trackpad or mouse to zoom in on your tree graph, clicking and dragging to view different parts of your database in finer detail. Hover over foreign keys to highlight relationships with primary keys and associated table data. If you need a bigger space to work with your database visualization, click the open button on the bottom right side of the visualizer panel. The same zoom, pan, and highlighting functionality is available in this larger view.
Projects Page
On the Projects page, you will find a table with information about your saved projects. There are columns for the project name, the date it was most recently updated, and buttons for viewing or deleting the projects. Projects can be ordered alphabetically by Project Name, or by the date they were Last Updated.
Saving your Project
For users that are signed in, you will have the ability to save your projects to your projects folder.
Updating your Project
While a saved project is loaded to the Home page, clicking the ‘Update Project’ icon from the toolbar will open a popover with a field for optionally changing the name of your project. Click ‘UPDATE’ to save your changes to the database. A popover will alert you of a successful update.
Opening Projects from Toolbar
Deleting a Project
On the projects page, clicking the ‘Delete Project’ button will prompt you to confirm the deletion of the associated project. A popover will notify you of a successful deletion.
If logged in, clicking the ‘View Projects’ folder icon from the toolbar will navigate to the Projects page.
GraphiQL Playground
Our team has built a direct integration with GraphiQL into our application. When you first access our application, an Apollo Server will automatically load demo data from the Star Wars API into the GraphiQL Playground. In order to have a server spun up using your own database data, edit the data in the following files in your forked repository of VisiQL (hint: you can generate the code you need using VisiQL!) - resolvers.js, schema.js, and starwarsModel.js. Upon relaunch of the app, your GraphiQL Playground will be ready for querying with your inputted data.
