akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: hydrate Vuex stores from IndexedDB on boot

Browse Source 
Cached fetches no longer issue a /cache_keys preflight per call. The client
trusts whatever it has in IDB and keeps it fresh through ActionCable
broadcasts and the existing reconnect-time batch revalidate.

On warm boots a new hydrateStoresFromCache helper seeds Vuex from IDB
before ActionCable connects, so inboxes, labels, teams, canned responses,
and agents render immediately from cache. The helper snapshots local cache
keys before fetching server keys — without that ordering the comparison
would always see "fresh" against the just-written key and stale data would
be served forever. Stale entries are revalidated in the background; cold
devices stay on the network-fetch path with no regression.

Also awaits replace inside refetchAndCommit so the data write completes
before the cache key is persisted, closing a window where a concurrent
reader could see a fresh key paired with stale data.
This commit is contained in:
Shivam Mishra
2026-05-21 17:22:04 +05:30
parent fe5c353106
commit 4633b49c39
4 changed files with 237 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/api/CacheEnabledApiClient.js
+18 -16
View File
@@ -43,24 +43,24 @@ class CacheEnabledApiClient extends ApiClient {
return this.getFromNetwork();
}
const { data } = await axios.get(
`/api/v1/accounts/${this.accountIdFromRoute}/cache_keys`
);
const cacheKeyFromApi = data.cache_keys[this.cacheModelName];
const isCacheValid = await this.validateCacheKey(cacheKeyFromApi);
// Trust the IDB cache. Freshness is maintained by:
// - boot-time hydrateStoresFromCache (compares server keys once on boot)
// - ActionCable ACCOUNT_CACHE_INVALIDATED broadcasts (live updates)
// - ReconnectService.revalidateCaches (on WebSocket reconnect)
// Skipping the per-call /cache_keys preflight eliminates N GET requests per
// cold settings-page load.
const localData = await this.dataManager.get({
modelName: this.cacheModelName,
});
let localData = [];
if (isCacheValid) {
localData = await this.dataManager.get({
modelName: this.cacheModelName,
});
if (localData.length > 0) {
return this.marshallData(localData);
}
if (localData.length === 0) {
return this.refetchAndCommit(cacheKeyFromApi);
}
return this.marshallData(localData);
// Empty IDB (first load or wiped): seed from network using whatever local
// cache key we have (null when never seen). refetchAndCommit handles null.
const localKey = await this.dataManager.getCacheKey(this.cacheModelName);
return this.refetchAndCommit(localKey);
}
async refetchAndCommit(newKey = null) {
@@ -69,7 +69,9 @@ class CacheEnabledApiClient extends ApiClient {
try {
await this.dataManager.initDb();
this.dataManager.replace({
// Await replace so data is persisted before the cache key is — otherwise
// a concurrent reader could see a fresh key paired with stale data.
await this.dataManager.replace({
modelName: this.cacheModelName,
data: this.extractDataFromResponse(response),
});