GraphQL query and caching solution
No Data
FilamentQL is a lightweight caching library for GraphQL queries that utilizes a parsing algorithm to detect differences between incoming queries and existing data stored within the cache. The library offers tools for both client and server side caching as well as tools for offline mode.
FilamentQL's npm package can be downloaded here
On the server-side, FilamentQL provides a GraphQL endpoint for your Express server with user-defined type definitions and resolvers, and creates a caching layer via a local Redis instance. When a client makes a request, FilamentQL checks the Redis cache for any previously stored data that matches the request. Through a parsing algorithm, FilamentQL then takes the incoming query and identifies any dissimilarities, and makes a subsequent query for just those dissimilarities to the database. Whenever possible, FilamentQL merges data coming back from the database with data from Redis cache and sends it back to the client:
On the client-side, FilamentQL behaves similarly. For its local cache implementation, FilamentQL utilizes session storage, a built-in property on the browser's window object, which allows data to persist throughout page refreshes.
FilamentQL also supports an offline mode. If the user gets disconnected from the server, all mutations made when the internet is down will be stored in a queue. At a set interval, FilamentQL checks if the network is back online. Whenever the user is back online, FilamentQL dequeues and sends each mutation to the server. Subsequently, the data that comes back from server will update the state and re-render the frontend components. What the user experiences and sees on their end is a seamless re-syncing of information when they come back online.
FilamentQL utilizes Redis for its server-side caching. If Redis is not already installed on your machine:
brew install redis
redis-server
localhost:6379
redis-cli ping, you will get a
PONGin response if your redis server is working properly.
redis-server
localhost:6379
redis-cli ping, you will get a
PONGin response if your redis server is working properly.
Check out our npm package
npm install filamentql
FilamentQL comes with
filamentql/clientand
filamentql/serverin order to make all the magic happen.
On client side,
filamentqlexposes 2 hooks:
useFilamentQuery- helps query data from GraphQL server -
useFilamentMutation- helps make mutation even though the network is offline
Both abstract away how to fetch queries and mutations and automatically update state when data is returned from server.
import React, { useState } from 'react'; import { useFilamentQuery, useFilamentMutation } from 'filamentql/client';const query =
query { todos { id text isCompleted } }
;const mutation = (text) =>
mutation { addTodo(input: { text: "${text}" }) { id text isCompleted } }
;const App = () => { const [value, setValue] = useState(''); const { state: todosQuery } = useFilamentQuery(query); const [callAddTodoMutation, addTodoResponse] = useFilamentMutation( mutation, () => { // this callback is invoked when data is returned from server // this is a good place to update relevant state now with new data console.log(addTodoResponse.addTodo); } );
const handleSubmit = (event) => { event.preventDefault(); callAddTodoMutation(value); setValue('') };
const handleChange = (event) => setValue(event.target.value)
return (
New todo); };{todosQuery && todosQuery.todos.map((todo) => )}export default App;
FilamentQL achieves the caching ability via Express middleware
/filament. This middleware will determine if it needs to talk to
/graphqlor just returns the data from cache.
Since
useFilamentQueryunder the hood will send all queries to
/filament, the middleware
/filamentneeds to be setup in order to facilitate caching process.
And make sure to mount your GraphQL server at route
/graphql.
const express = require('express'); const { graphqlHTTP } = require('express-graphql'); const redis = require('redis');// Redis Setup const client = redis.createClient(); client .on('error', (err) => console.log('Error: ' + err)) .on('connect', () => console.log('Redis client connected'));
// FilamentQL Setup const filamentMiddlewareWrapper = require('filamentql/server'); const filamentMiddleware = filamentMiddlewareWrapper(client);
// Express setup const app = express(); const PORT = 4000; const schema = require('./schema');
app.use(express.json()); app.use('/filament', filamentMiddleware); app.use( '/graphql', graphqlHTTP((req) => ({ schema, graphiql: true, context: { req, }, })) );
app.listen(PORT, () => console.log(
GraphQL server is on port: ${PORT}
));
FilamentQL is an open-source NPM package created in collaboration with OS Labs and developed by - Andrew Lovato - Chan Choi - Duy Nguyen - Nelson Wu
More infomation about FilamentQL can be found at filamentql.io