Query without worry: Quell 8.0 launches to amplify GraphQL queries
Quell is back with some of our most exciting updates to date: a context visualizer to give developers valuable visual feedback on the structure of their queries, an updated developer tool to help you manage your GraphQL queries, more robust client-side caching algorithms, a website redesign, and so much more.
GraphQL: an effective and simpler alternative to REST
Since its public release in 2015, GraphQL has overhauled the way we construct and engage with APIs. GraphQL provides a flexible and efficient query language that simplifies data retrieval, making it popular among developers as a powerful alternative to conventional REST APIs.
In contrast to REST, GraphQL permits clients to specifically request the data they require, resulting in a reduction of excessive or insufficient information retrieval. This fine-grained approach to data fetching empowers developers to create applications that are more efficient and responsive, ultimately enhancing performance and user experience.
However, caching has always posed a challenge in the realm of GraphQL due to its dynamic and nested responses. The adaptability of traditional caching mechanisms designed for REST APIs is limited by the unique structure and flexibility of GraphQL.
The lightweight caching solution for GraphQL developers
As an open-source, easy-to-use caching solution for GraphQL queries, Quell aims to optimize the performance of applications on both client and server-sides by reducing server load and improving response times.
Quell parses GraphQL queries and caches them in order to minimize the number of requests needed to be sent over the network, making applications faster and more efficient. As the popularity of GraphQL continues to grow, having a reliable caching solution like Quell — with its lightning-fast caching, fetching capabilities, and rebuilding strategies — makes it easy for developers to build high-performing applications that scale.
Updates to Quell
For Quell 8.0, we focused on sweeping changes across the board to overhaul and improve the product at every level. This includes adding a query context visualizer, major improvements to the client-side caching algorithm, reworking the existing Chrome extension developer tool, and much more. As a result, Quell 8.0 represents one of our most exciting product updates to date.
Chrome Extension
The long-awaited Quell Dev Tool version 2.0 is now available on the Chrome Store, providing an updated set of valuable tools to developers working with Quell.
Context Visualizer
Our major upgrade in version 2.0 of the Quell Dev Tool is the addition of an interactive query context visualizer to the extension’s suite of performance metrics. The Context Visualizer displays each query’s response as a tree of nested fields, giving developers valuable visual feedback on the structure of their queries.
To equip developers with fine-grained insight into their queries’ performance, The Context Visualizer also displays the time spent by each resolver function over the course of the query.
Queries to a database using the GraphQL API depend on resolver functions to fetch the fields (and sub-fields) of the client’s query that are not already included in the database’s response to the root query. Breaking down the time for each resolver function to run enables powerful and efficient debugging by elucidating the sub-fields that are particularly time-intensive to resolve.
Updates to Pre-Existing Features
In addition to adding the Context Visualizer tool, the Quell team focused on fixing many features that had been broken due to recent updates to Quell’s caching algorithms. The Dev tool now contains improved detailed metrics and information on:
- Query response times
- Cache contents (client-side and server-side)
- Redis cache implementation
- Query schemas
- HTTP request and response contents in addition to others.
Finally, we improved the layout of the Dev Tool, allowing developers to more quickly and easily gather information about their Quell-supported web applications.
Improved Client-Side Caching
Quell 8.0 largely focused on improving the client-side caching algorithm, by refining cache fetching and invalidation strategies and adding support for caching mutations — add, edit, update or delete requests.
Mutations
Quell Client now properly supports GraphQL mutations, simplifying the process of caching mutations and keeping the cache synchronized with the server. When a mutation is executed, the mutation request is sent to the GraphQL server as usual, and once the server responds with the mutation result, Quell Client updates the cache with the new data. It’s important to note that caching mutations requires careful consideration and planning, and so we were careful to implement proper cache invalidation strategies.
LRU Caching
We wanted to add more robust caching invalidation strategies, so we incorporated an LRU (Least Recently Used) cache mechanism. LRU is essentially a data structure that maintains a limited-size cache of recently used items, organized in a way so that the least recently used item is evicted when the cache reaches its maximum capacity and a new item needs to be added. There are a number of benefits to this approach. An LRU cache can significantly improve the performance of a system by ensuring that the most recently used items are readily available, reducing the time and resources required to retrieve and compute them again. This added benefit will also improve the scalability of the system, as serving frequently accessed data from the cache can allow the system to handle more requests without overwhelming the underlying infrastructure. LRU can also lead to a smoother user experience by cutting down on response times.
Cache Refetching
Cached queries are now re-fetched in the background when a new mutation is sent through Quell. This means that not only does Quell cache the new mutation, but any data currently in the cache that is affected by this mutation is updated — so that next time the user queries that data, Quell provides a blazing fast and accurate response.
Increased Testing Coverage
By expanding the range of testing coverage within the caching algorithm, it allowed us to present improvements in overall reliability of our product, as well as in ease of use for future contributors. Through testing we were able to verify the newly implemented features worked concurrently to the currently existing product. Expanding the coverage enabled us to account for edge cases and vulnerabilities, and will help to catch future potential errors early in the development cycle. The improved testing coverage allowed the team to center their attention to improving the product, rather than debugging potential errors, which allowed us to release a product users can confidently apply to their workflow.
Website Overhaul
We’ve also launched a complete redesign of the Quell website: https://www.quell.dev/. It’s now more modern and sleek, while improving responsiveness across screen sizes so you can experience the Quell demo on any device.
For the new website, we opted to implement Tailwind CSS over the traditional CSS used by the previous iteration. This led to a number of different advantages for rapid development and scalability. The comprehensive set of pre-defined utility classes allowed us to quickly apply styles and create consistent, uniform designs across all of our React components. The design flexibility of Tailwind CSS also allowed us the freedom to build a more intricately-designed app. Lastly, the responsive-first approach by Tailwind CSS simplified the process of building responsive interfaces, so we could ensure that users were getting an amazing experience across devices.
Of course, the website contains our newest addition, the Context Visualizer, in its live Quell demo, so you can see firsthand the thread of execution and response times for any query.
Get started today
All the documentation you need to get started with implementing Quell can be found at quell-client npm, quell-server npm, or GitHub.
You can find the Quell Developer Tool at the Chrome Web Store.
Lastly, you can test-drive Quell for yourself by using the live demo on the Quell website.
Open to contributions
As an open-source product, Quell thrives on the contributions made by the developer community to become a better caching solution. If you are interested in adding new features, fixing bugs, or improving documentation, we invite you to contribute.
Check out our GitHub repository at https://github.com/open-source-labs/Quell to get started, and do not hesitate to reach out with any questions or ideas you may have.
