Persist the query cache to storage and restore it on page load.

Installation

npm install @pinia/colada-plugin-cache-persister

Usage

import { PiniaColadaCachePersister, isCacheReady } from '@pinia/colada-plugin-cache-persister'

app.use(PiniaColada, {
  plugins: [
    PiniaColadaCachePersister({
      // Options (all optional)
      key: 'pinia-colada-cache', // Storage key
      storage: localStorage, // Storage backend
      debounce: 1000, // Persist delay in ms
    }),
  ],
})

// if using async storage, wait for cache to be restored before mounting the app
// (not needed with localStorage)
await isCacheReady()
app.mount('#app')

GC Time

Queries are removed from storage when they are garbage collected. Increase gcTime to keep data longer:

useQuery({
  key: ['users'],
  query: fetchUsers,
  gcTime: 1000 * 60 * 60 * 24, // 24 hours
})

Options

| Option | Type | Default | Description | | ---------- | ------------------------------- | ---------------------- | ------------------------------- | | key | string | 'pinia-colada-cache' | Storage key | | storage | Storage \| PiniaColadaStorage | localStorage | Storage backend (sync or async) | | filter | UseQueryEntryFilter | - | Filter which queries to persist | | debounce | number | 1000 | Debounce time in ms |

Filtering Queries

Only persist specific queries using a filter:

PiniaColadaCachePersister({
  filter: { key: ['users'] }, // Only persist queries starting with 'users'
})

Or use a predicate function:

PiniaColadaCachePersister({
  filter: {
    predicate: (entry) => entry.key[0] === 'important',
  },
})

Async Storage

Works with async storage backends like IndexedDB, compatible with unstorage:

import { get, set } from 'idb-keyval'

PiniaColadaCachePersister({
  storage: {
    getItem: (key) => get(key),
    setItem: (key, value) => set(key, value),
  },
})

License

MIT