A simple cache created for React Location Route loaders.
yarn add @tanstack/react-location-simple-cache# ornpm i @tanstack/react-location-simple-cache
import { ReactLocation, Router } from '@tanstack/react-location'import { ReactLocationSimpleCache } from '@tanstack/react-location-simple-cache'//const routeCache = new ReactLocationSimpleCache()const location = new ReactLocation()function App() {return (<Routerlocation={location}routes={[{path: '/',element: <Posts />,loader: routeCache.createLoader(async () => ({posts: await fetchPosts(),})),},]}/>)}
Use the ReactLocationSimpleCache
class to create a new cache instance.
const simpleCache = new ReactLocationSimpleCache()
This is the underlying shape of each record that is stored in the cache:
import { LoaderData, RouteMatch } from '@tanstack/react-location'export type SimpleCacheRecord<TData extends LoaderData = Record<string, unknown>,> = {key: stringupdatedAt: numberready: booleanpromise?: Promise<TData>data?: anyinvalid?: booleanmatch: RouteMatch}
The caching functionality of the simple cache allows for a few different fetch policies to be used when determining if and when your loader function gets called again.
type FetchPolicy = 'cache-and-network' | 'cache-first' | 'network-only'
cache-and-network
maxAge
was not supplied:maxAge
was supplied OR the record has been manually invalidated:cache-first
invalid
, it will be refetch in the backgroundnetwork-only
cache.createLoader
This cache method creates a loader function for a React Location route.
createLoader: (loader: Loader,opts?: {key?: (match: RouteMatch) => stringmaxAge?: numberpolicy?: FetchPolicy},) => Loader
Property | Description |
---|---|
loader | The loader function you would normally pass to your router loader property |
key | An optional function that receives the RouteMatch object and returns a unique string used to identify the underlying record for this route. The full route pathname is used by defualt. |
maxAge | If using the `An optional integer of milliseconds to use as the threshold of time before the underlying data will be fetched again. |
policy | The FetchPolicy to be used for this loader |
const routes = [{path: ':postId',element: <Post />,loader: routeCache.createLoader(async ({ params: { postId } }) => ({post: await fetchPostById(postId),}),{key: (match) => `posts_${match.params.postId}`,},),},]
cache.clearAll
Resets the cache to its original state with no records and no data
type cache = {removeAll(): void}
cache.clear
Removes records from the cache by predicate function
type cache = {remove<TLoaderData>(predicateFn: (record: SimpleCacheRecord) => boolean | any,): void}
cache.filter
Returns records by predicate function
type cache = {filter<TLoaderData>(predicateFn: (record: SimpleCacheRecord) => boolean | any,): SimpleCacheRecord<TLoaderData>}
cache.find
Returns the first record found by predicate
type cache = {find<TLoaderData>(predicateFn: (record: SimpleCacheRecord) => boolean | any,): SimpleCacheRecord<TLoaderData>}
cache.invalidate
Invalidates records by predicate function
type cache = {invalidate<TLoaderData>(predicateFn: (record: SimpleCacheRecord) => boolean | any,): void}
The best JavaScript newsletter! Delivered every Monday to over 76,000 devs.