Quell is a lightweight JavaScript library providing a client and server side a caching solution for GraphQL equipped with normalized caching.

What is Quell?

GraphQL is designed to make APIs fast, flexible, and developer-friendly. It can even be deployed within an integrated development environment (IDE) known as GraphiQL. As an alternative to REST, GraphQL let developers construct requests that pull data from multiple data sources in a single API call.

Quell arises as a solution to provide caching for GraphQL. Quell is a caching GraphQL and creates a caching layer via a local Redis instance.

We are super exited to present to you Quell. Let’s start caching!

What does Quell do?

Quell’s schema-governed, type-level normalization algorithm deconstructs GraphQL query responses into individual graph nodes to be cached separately as constant-time-readable key-value pairs, with references to connected nodes.

Subsequent GraphQL requests are then checked against the cached data store, allowing Quell to only request the data it needs by dynamically reformulating a new query for what’s missing.

Query responses are then merged with the data present in the cache and a full response is returned seamlessly.

How can you use Quell?

Quell/Client

Quell/Client is an easy-to-implement JavaScript library providing a client-side caching solution for 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 the browser’s sessionStorage, reformulate the query, and fetch from other APIs or databases only the data not already cached.

Sample code of fetch request without Quell:

const sampleQuery = `query {
    countries {
        id
        name
        cities {
            id
            name
            population
        }
    }
}`

function fetchMe(sampleQuery) {
    let results;
    fetch('/graphQL', {
        method: "POST",
        body: JSON.stringify(sampleQuery)
    })
    .then(res => res.json())
    .then(parsedRes => {
      // use parsed results
     });

fetchMe(sampleQuery)

The Quell method takes in four parameters:

1. endpoint — your GraphQL endpoint as a sting (ex. ‘/graphQL’).
2. query — your GraphQL query as a string.
3. map — an object that maps named queries to the user-defined GraphQL types they return.

const sampleMap = {
  countries: 'Country',
  country: 'Country',
  citiesByCountryId: 'City',
  cities: 'City',
}

4. fieldsMap — an object that maps fields to the user-defined GraphQL types they return.

const sampleFieldsMap = {
  cities: 'City'
}

For more information about Quell client-side, you can learn more in our documentation.

Quell/Server

Quell/server is an easy-to-implement Node.js/Express middleware that satisfies and caches GraphQL queries. 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 the server’s Redis cache, reformulate the query, and fetch from other APIs or databases only the data not already cached, here is the installation steps.

And your server file might look like this:

const express = require('express');
const myGraphQLSchema = require('./schema/schema');
const { QuellCache } = require('@quell/server')

// create a new Express server
const app = express();

// instantiate quell-server
const quellCache = new QuellCache(myGraphQLSchema, 6379, 3600);

// apply Express's JSON parser
app.use(express.json());

// GraphQL route
app.use('/graphql',
    quellCache.query,
    (req, res) => {
    return res
        .status(200)
        .send(res.locals.queryResponse);
    }
);

// expose Express server on port 3000
app.listen(3000);

For more information about Quell and server-side rendering, you can learn more in our documentation.

Caching

GraphiQL:

Documentation

We have provided extensive documentation on our website, quellql.io. If you find an error in the documentation, please submit an issue via GitHub.

Open-Source & Community Contributions

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

Team QuellQL

Andrei Cabrera| GitHub | LinkedIn
Dasha Kondratenko| GitHub | LinkedIn
Derek Sirola | GitHub | LinkedIn
Xiao Yu Omeara | GitHub | LinkedIn

More content at plainenglish.io