QLens — See your GraphQL Schemas materialize before your eyes!

Steven LaBrie
4 min readFeb 25, 2021

GraphQL boilerplate no more! With this newly released tool, you no longer have to write long lines of code to coincide with your non-relational database schemas. Let’s take a look into this brand new product and see all that it can do.

All About QLens —

Download your GraphQL Schemas and visualize non-relational database hierarchy in a simple to use and straightforward application.

Since its inception, GraphQL has provided a higher level of flexibility and specificity in API development never before seen. Although migrating from a RESTful api architecture might be new to some developers, the advantages that GraphQL offers developers in the right situations is worth the migration. Applications become more lightweight and flexible with GraphQL due to its declarative data fetching allowing the user to ask for exactly what they need. In development, GraphQL allows for frontend and backend teams to work independently without interrupting their work flow since there is no need for versioning and GraphQL’s strictly typed schemas allow for frontend developers to continue working without having to wait for the backend’s most updated version of the API.

Why QLens?

The idea behind creating QLens is to resolve an issue facing developers utilizing GraphQL which significantly cuts development time by automating the formation of their GraphQL schemas based on information fetched from their non-relational database. By inputting your MongoDB URI, selecting the schemas you would like to see converted into GraphQL schemas, with the click of a button, you are able to download your GraphQL schemas right into a zip file. Follow these easy steps to get started…

Getting Started —

First thing’s first: navigate over to your terminal and globally install this npm package that will allow for QLens to extract your MongoDB schemas:

npm -g install extract-mongo-schema

By clicking here you can find the links to download QLens for your particular operating system. Click the link that corresponds to your operating system to download the QLens electron app to your desktop. You will be taken to GitHub.

For Mac Users: Click the .dmg file e.g. ‘QLens-1.0.1.dmg’.

For Windows Users: Click the .exe file e.g. ‘QLens-Setup-1.0.1.exe’.

Follow the download steps. Double click the QLens icon to start up the application.

Using QLens —

Enter URI:

Simply enter your non-relational database (MongoDB) URI in the input form at the top of the screen and press enter. You will see a dropdown menu on the left hand side of the screen revealing all of your database schemas. Click the schemas you would like converted to GraphQL and then click the ‘Add Schemas’ button.

Hierarchy Display:

The first thing you’ll notice in the center of the screen is a graph displayed to visualize the hierarchy of your non-relational database schemas in a tree-like structure.

GraphQL Schemas:

On the right side of the screen is where your life just got a whole lot easier. You will find your GraphQL schema boilerplate already entirely formatted for your project complete with resolvers and mutations. At the top of the text editor, there is a tab where you can toggle and see your MongoDB schemas in their own editor. Here is where you can either copy your GraphQL schemas and paste right into your code editor, or click the download button…

Download Schemas:

Click the Download Schemas button at the bottom of the code editor and the GraphQL schema code will download into a folder onto your desktop. Drag the folder into your preferred code editor and voilà! Formatted GraphQL schemas right there in your code editor! It’s that easy!

Playground:

Back in QLens, you can see your GraphQL schemas in action by clicking on the Playground button at the top right-hand side of the screen which will take you to GraphQL’s very own integrated development environment, GraphiQL where you can make queries and test your code.

Reset:

When you are ready to visualize and convert a new set of schemas, simply click the Reset button underneath the Add Schemas button and start again from the beginning.

Where Can You Find QLens? —

Download QLens onto your desktop by going to qlensapp.com or find the latest releases at https://github.com/oslabs-beta/QLens.

QLens engineers and co-authors:
Cho Yee Win Aung, Github | Linkedin | Medium
Steven LaBrie, Github | Linkedin | Medium
Jake Diorio, Github | Linkedin
Judy Tan, Github | Linkedin | Medium

--

--