Here Comes Quell: the Better Caching Solution for GraphQL

4 min readJul 1, 2021

--

Developers, be advised. An increasing number of companies are transitioning away from traditional REST APIs in favor of GraphQL in order to benefit from the flexibility, simplicity of use, and precision of data transfer it provides. GraphQL allows developers to overcome the over and under fetching shortcomings of REST APIs by enabling data collection from multiple sources in a single API call.

However, GraphQL queries operate on the same HTTP endpoint, instead of a URL that can act as a globally unique identifier, as is the case with REST APIs. Therefore, they require the development of new methods and standards for caching.

That’s where Quell comes in.

Now supporting more GraphQL features than ever before.

What is Quell?

Quell is an easy-to-use, lightweight JavaScript library, enabling efficient caching for applications leveraging GraphQL. Quell’s schema-governed, type-level normalization algorithm caches GraphQL query responses as flattened key-value representations of the graph’s nodes, making it possible to partially satisfy queries from a cached data store, reformulate the query, and fetch from other APIs or databases only the data not already cached. This strategy increases cache hits, reduces network calls, and significantly reduces the overall runtime.

Quell can be installed for both client (Quell/Client) and server-side (Quell/Server) usage as separate, open-source NPM packages. Quell/Client harnesses the browser’s sessionStorage as its cached data store. Quell/Server utilizes the server’s Redis cache.

Want to read this story later? Save it in Journal.

This latest update to the Quell product expands upon the flexible, time-saving capabilities of Quell to support more core GraphQL features, caching requests with aliases, fragments, multiple queries, or nested queries.

Quell caches requests with aliases, fragments, multiple queries, or nested queries.

Quell Caches Even More Requests

Quell/Client and Quell/Server now supports a broader range of GraphQL features for caching: including aliases, fragments, multiple queries, and nested queries. Steps for installation and implementation of the updated Quell product can be found here for client-side, and here server-side.

Quell/Client functions as a wrapper over the fetch web API; unlike tools such as Apollo or Relay, Quell/Client can integrate with any front-end framework that supports fetch without causing incompatible state management patterns. As a Node.js/Express middleware, Quell/Server easily integrates into pre-existing Express server architecture without significant refactoring.

Developers can entrust Quell to handle their GraphQL caching needs simply and effectively, so they can focus on working with their existing tool(s).

Aliases

Example of caching request with alias by Quell Demo

Fragments

Example of caching request with fragment by Quell Demo

Multiple Queries

Nested Queries

Getting Started

Try the demo yourself on our website, quellql.io. Remember to put on your seat belt!

Open-Source & Community Contributions

Quell is an open-source project developed under tech accelerator OS Labs. We welcome contributions and feedback via GitHub. If you love using Quell, or if you’re just excited by the project, we appreciate each GitHub star that comes our way.