8 |
9 |
10 | LightQL
11 | 12 |
13 | Welcome to LightQL. A lightspeed, lightweight client-side cache for GraphQL.
14 |
15 | Explore the docs »
16 |
17 |
18 | View Demo
19 |
8 |
9 |
10 |
13 | Welcome to LightQL. A lightspeed, lightweight client-side cache for GraphQL.
14 |
15 | Explore the docs »
16 |
17 |
18 | View Demo
19 |
118 |
119 |
120 |
121 |
122 |
123 | ## How LightQL works
124 |
125 | LightQL caches responses to GraphQL formatted queries as key-value object representations of the graph’s nodes, making it possible to satisfy GraphQL queries from a cached data store.
126 |
127 | When your application needs data, it checks the cache first to determine whether the data is available. If the data is available (a cache hit), the cached data is returned, and the response is issued to the user. If the data isn’t available (a cache miss), the database is queried for the data. The cache is then populated with the data that is retrieved from the database, and the data is returned to the user. The benefit of this strategy is that the cache contains only data that the application actually requests, keeping the cache size cost-effective. Further, this increases cache hits, reduces network calls, and significantly reduces the overall runtime and latency.
128 |
129 | LightQL’s LRUCache function creates an instance of the LightQL cache. A capacity and GraphQL endpoint are the two necessary arguments to pass in to this function. The LRUCache consists of a HashMap and Doubly-Linked List to store GraphQL query responses. The combination of these two data structures offer best-case scenario time complexity (O(1)) for insertion, deletion, and lookup.
130 |
131 | ```js
132 | function LRUCache(capacity, graphqlEndpoint) {
133 | this.capacity = Math.floor(capacity);
134 | this.map = new Map();
135 | this.dll = new DoublyLinkedList();
136 | this.graphqlEndpoint = graphqlEndpoint;
137 | }
138 | ```
139 |
140 | LightQL leverages localForage and IndexedDB to persist cached data between sessions. localForage is a fast and simple storage library for Javascript. localForage leverages asynchronous storage through IndexedDB, a JS-based object-oriented database that runs in your browser, with a simple, localStorage-like API. Whenever you run a query through LightQL, the capacity, HashMap, Doubly-Linked List, and graphqlEndpoint are loaded into memory if available through the localForage setItem method:
141 |
142 | ```js
143 | localforage.setItem();
144 | ```
145 |
146 | Additionally, before returning data to users, LightQL writes our cache data structures and graphqlEndpoint to our persistent memory in IndexedDB through the localForage getItem method:
147 |
148 | ```js
149 | localforage.getItem();
150 | ```
151 |
152 | Developers can entrust LightQL to handle their GraphQL caching needs simply and effectively, so they can focus on working what matters most.
153 |
154 |
155 |
156 |
157 |
158 | ## Roadmap
159 |
160 | Upcoming planned features:
161 |
162 | - Caching of query mutations
163 | - Cache pruning/invalidation strategy
164 | - Partial retrieval
165 |
166 |
167 |
168 |
169 |
170 | ## Contributing
171 |
172 | Here at LightQL we created our open-source project with the intention to further expand upon and improve this tool for years to come.
173 |
174 | That's where the community comes in! If you have an idea that might make LightQL better we always encourage contributions. Simply follow the steps below to submit the changes you would make.
175 |
176 | - Fork LightQL
177 | - Pull down our dev branch with command (`git pull origin dev`)
178 | - Create your own Feature Branch with the command (`git checkout -b 36 | LightQL is an open-source developer tool that leverages the 37 | pinpoint accuracy of GraphQL's queries and implements caching to 38 | improve your website's query efficiency. 39 |
40 |57 | If this is your first time using LightQL, run the following 58 | command in your terminal: 59 |
60 |npm install lightql-cache62 | 72 |
75 | In your frontend app’s file (e.g. your ***filename.js*** file), 76 | you want to import our LightQL module to handle GraphQL requests 77 | using the ES6 module format. This can also be done in your React 78 | (.jsx), Typescript (.ts and .tsx), and similar file formats. 79 |
80 | 81 |{importStr}
83 |
93 | 96 | Next, create an instance of a cache using the de-structured 97 | LRUCache object, passing in a capacity as the first argument. 98 | The capacity must be an integer and greater than zero. You must 99 | also pass in a valid GraphQL endpoint as a string as the second 100 | argument. We have set a capacity of 3 in our example below: 101 |
102 | 103 |105 | const cache = new LRUCache(3, 106 | 'http://localhost:3000/graphql'); 107 |108 | 118 |
121 | Now, to make your first query to the cache, you create a GraphQL 122 | formatted query string based on your requirements, for example: 123 |
124 |
126 | {graphqlQueryStr}
127 |
128 | 131 | Next, we invoke the get function associated with the named 132 | variable you have for the LRUCache, and pass in your query 133 | string and associate variables if necessary. The get function 134 | always returns a promise, therefore it is best to generate an 135 | async function that leverages the await syntax to resolve the 136 | data returned from the cache. 137 |
138 | 139 |{callTheCache}
141 |
153 | 156 | Now, you are properly set up and can use the data as you wish! 157 |
158 | 159 |160 | A quick example: imagine you had a React app that included 161 | Chart.js functionality that you wanted to display on a specific 162 | page. You could import LightQL cache to effectively retrieve 163 | your data from your database, and then store it in your 164 | client-side LightQL caching solution. Then, every time you 165 | wanted to display the correct chart.js data, you could grab the 166 | correct information from your LightQL cache with extremely low 167 | latency time. Example code below: 168 |
169 | 170 |{queryStr}
101 |
105 | {pulledData}
106 |
107 | {uncachedTime}
124 |{currentTime}
125 |18 | Bloated NPM installs with 100+ dependencies and packages, pulling in 19 | 35MB+ of JS generates a bundle size that could lead to poor app 20 | performance in bandwith constrained apps. There is also a lack of 21 | support for other frameworks outside of React. 22 |
23 |29 | You want extremely low latency, client-side caching with persistent 30 | data storage. You want a high cache hit-rate from a lazy loading 31 | implementation to improve performance and save system resources. You 32 | want to set up ALL OF THIS in seconds. 33 |
34 |42 | In order to provide the developer with very efficient caching for 43 | their GraphQL queries, LightQL implements a modern tech stack. Cache 44 | your queries with us to leverage these technologies and improve your 45 | application performance! 46 |
47 |55 | Typescript 56 |
57 |65 | GraphQL 66 |
67 |71 | Jest 72 |
73 |81 | Local Forage 82 |
83 |38 | A lightspeed, lightweight client-side cache for GraphQL. 39 |
40 |43 | $ 44 |
45 |46 | npm install lightql-cache 47 |
48 | 51 | navigator.clipboard.writeText('npm install lightql-cache') 52 | } 53 | style={{ color: '#323949' }} 54 | > 55 | 56 | 57 |Contact us
66 | 67 |{text}
17 |