d605d0d544
Some checks failed
Demo images / Build & push demo images (push) Failing after 2m11s
- PeerFiles.vue reads the SAME `cloud.peer-browse:<onion>` entry Cloud.vue's per-peer fan-in fills, so Cloud → peer files paints instantly from cache and revalidates behind it; catalog/error/loading/transport are now computed views over the store entry. - preview-peer fan-out is capped at 3 concurrent with a queue (was one 30s RPC per media item, all at once, unbounded) and aborts on unmount. - browse + preview RPCs drop to maxRetries:1 — retry×3 turned one slow peer into a 90s spinner. - fix useCachedResource's interface types: `ReturnType<typeof computed<T>>` resolves to the writable overload (WritableComputedRef), which broke vue-tsc against the plain computed() returns; use ComputedRef<T>. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
108 lines
4.3 KiB
TypeScript
108 lines
4.3 KiB
TypeScript
// Stale-while-revalidate resource hook over the shared resources store.
|
|
//
|
|
// Usage:
|
|
// const files = useCachedResource<CloudFile[]>({
|
|
// key: 'cloud.my-files',
|
|
// fetcher: (signal) => rpcClient.call({ method: 'content.list', signal, dedup: true }),
|
|
// ttlMs: 30_000,
|
|
// })
|
|
// // template: files.data renders instantly on revisit (cache), while
|
|
// // files.loadState === 'refreshing' drives a subtle refresh indicator.
|
|
//
|
|
// Behavior:
|
|
// - Synchronous hydrate: memory (survives navigation) → sessionStorage
|
|
// snapshot (survives reload) → fetch.
|
|
// - Sticky-ready: never regresses ready → loading; refreshes are
|
|
// 'refreshing' so content stays on screen.
|
|
// - Stale-while-revalidate: on mount, cached data is shown immediately and a
|
|
// background refresh runs only if the TTL has lapsed (or never fetched).
|
|
// - Keep-last-value on error, with `isStale`/`ageMs` for badges.
|
|
// - revalidateOnFocus: refreshes when the tab regains focus and the data is
|
|
// stale (debounced by TTL, so focus-flapping is free).
|
|
// - Abort-on-unmount: the fetcher receives an AbortSignal that fires when
|
|
// the last subscribed component unmounts.
|
|
|
|
import { computed, getCurrentScope, onScopeDispose, type ComputedRef } from 'vue'
|
|
import { useResourcesStore, type ResourceEntry, type ResourceLoadState } from '@/stores/resources'
|
|
|
|
export interface CachedResourceOptions<T> {
|
|
/** Cache key. Include identifying params, e.g. `peer-files:${onion}`. */
|
|
key: string
|
|
/** Fetch fresh data. Receives an abort signal tied to component lifetime. */
|
|
fetcher: (signal: AbortSignal) => Promise<T>
|
|
/** Data older than this triggers a background revalidate (default 30s). */
|
|
ttlMs?: number
|
|
/** Snapshot to sessionStorage so reloads paint instantly (default true).
|
|
* Disable for large payloads. */
|
|
persist?: boolean
|
|
/** Revalidate (if stale) when the window regains focus (default true). */
|
|
revalidateOnFocus?: boolean
|
|
/** Fetch on first use (default true). Set false for lazy resources. */
|
|
immediate?: boolean
|
|
}
|
|
|
|
export interface CachedResource<T> {
|
|
entry: ResourceEntry<T>
|
|
/** Convenience computed views over the entry. */
|
|
data: ComputedRef<T | null>
|
|
loadState: ComputedRef<ResourceLoadState>
|
|
error: ComputedRef<string | null>
|
|
/** True when data exists but is older than the TTL (drive an age badge). */
|
|
isStale: ComputedRef<boolean>
|
|
ageMs: ComputedRef<number | null>
|
|
/** Force a refresh now (deduped with any in-flight one). */
|
|
refresh: () => Promise<void>
|
|
/** Mark stale + debounce-refresh all mounted users of this key. */
|
|
invalidate: () => void
|
|
/** Optimistically update cached data; returns rollback for RPC failure. */
|
|
optimistic: (update: (current: T | null) => T) => () => void
|
|
}
|
|
|
|
export function useCachedResource<T>(opts: CachedResourceOptions<T>): CachedResource<T> {
|
|
const store = useResourcesStore()
|
|
const ttlMs = opts.ttlMs ?? 30_000
|
|
const persist = opts.persist ?? true
|
|
const entry = store.entry<T>(opts.key, persist)
|
|
|
|
const aborter = new AbortController()
|
|
const fetcher = () => opts.fetcher(aborter.signal)
|
|
const refresh = () => store.refresh(opts.key, fetcher, { persist })
|
|
|
|
const stale = () => entry.fetchedAt === null || Date.now() - entry.fetchedAt > ttlMs
|
|
const refreshIfStale = () => {
|
|
if (stale()) void refresh()
|
|
}
|
|
|
|
// Register as a live revalidator so invalidate(key) reaches us.
|
|
const unsubscribe = store.subscribe(opts.key, () => void refresh())
|
|
|
|
const onFocus = () => refreshIfStale()
|
|
if (opts.revalidateOnFocus ?? true) {
|
|
window.addEventListener('focus', onFocus)
|
|
}
|
|
|
|
// Tied to the owning effect scope (component setup or manual scope);
|
|
// outside any scope (tests, module init) there's nothing to dispose.
|
|
if (getCurrentScope()) {
|
|
onScopeDispose(() => {
|
|
unsubscribe()
|
|
window.removeEventListener('focus', onFocus)
|
|
aborter.abort()
|
|
})
|
|
}
|
|
|
|
if (opts.immediate ?? true) refreshIfStale()
|
|
|
|
return {
|
|
entry,
|
|
data: computed(() => entry.data),
|
|
loadState: computed(() => entry.loadState),
|
|
error: computed(() => entry.error),
|
|
isStale: computed(() => entry.data !== null && stale()),
|
|
ageMs: computed(() => (entry.fetchedAt === null ? null : Date.now() - entry.fetchedAt)),
|
|
refresh,
|
|
invalidate: () => store.invalidate(opts.key),
|
|
optimistic: (update) => store.optimistic<T>(opts.key, update),
|
|
}
|
|
}
|