QLeo
A Visual Performance Tracking Tool for GraphQL
What is QLeo?
QLeo is designed to be used in a development environment. We provide a simple and intuitive interface with graphical representations of key metrics. This allows developers to debug and tune performance for inefficient GraphQL requests.
QLeo is in active development. Please follow to the end of the repository for contribution guidelines.
Features
- Easy Configuration: With just a click of a button, QLeo will start to run and allow users to generate performance metrics according to the uploaded schema model.
- Montior Queries at Resolver-Level: Understand and track GraphQL queries, mutations, response times, and function invocations for individual resolvers.
- Visualize: Compare and reveal potential performance bottlenecks utilizing QLeo’s illustration to enhance the efficiency of GraphQL API calls.
- History: Keep record of GraphQL request’s performance metrics and graphs in the current session.
Installation
QLeo runs on Electron as a native desktop application. The instructions for MacOS users (Intel & M1) are as follows:
- Visit the QLeo Official Website or click here to download!
- Open the application and give access permissions.
- And that’s it! QLeo is all set and ready to start collecting performance data for any GraphQL requests.
How to Use
- Open application and upload a schema file.
- Navigate to the Dashboard tab – where a schema model, a code editor, and a Metrics directory will be displayed.
- The schema model and types will be available to view on the left panel for easy reference.
- Write up a GraphQL query and/or mutation in QLeo’s code editor, then press ‘Submit’.
- QLeo will start to gather and display the data on the Metrics directory on the right panel.
- It will display the total query response time.
- It will also display a breakdown of resolvers:
- Toggle the ‘Show Details’ to view corresponding performance and metrics.
- Navigate to the Performance tab – View your resolver’s performance with graphical representation.
- All previous requests will be saved in the History tab – Refer back to any of the request’s performance metrics by simply selecting the corresponding query that was made.
Technologies Involved
- Electron
- Javascript ES6+
- Apollo GraphQL
- Node.js
- React
- Webpack
- Tailwind CSS
- CodeMirror Code Editor
Contributing
Interested in making a contribution to QLeo? Click here for our open-source contribution guidelines.
Visit our website for more information.
Our Team
- Andrew Talle Github || LinkedIn
- Chon Hou Ho Github || LinkedIn
- Irine Kang Github || LinkedIn
- Jack Fitzgerald Github || LinkedIn
Contact
Email: [email protected]
Twitter: @QLeo.App
Website: qleo.app
GitHub: https://github.com/oslabs-beta/QLeo/
License
Distributed under the MIT License. See LICENSE for more information.
