custom cache

Author: huozhi

src/cache.ts

@@ -1,13 +1,26 @@
-import { Cache as CacheType, Key, CacheListener } from './types'
+import { Cache as CacheType, Key, CacheListener, CacheProvider } from './types'
 import hash from './libs/hash'
 
+const defaultNoopProvider: CacheProvider = {
+  initialData: {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  set() {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  clear() {}
+}
 export default class Cache implements CacheType {
   private __cache: Map<string, any>
   private __listeners: CacheListener[]
+  private __provider: CacheProvider
 
   constructor(initialData: any = {}) {
     this.__cache = new Map(Object.entries(initialData))
     this.__listeners = []
+    this.__provider = defaultNoopProvider
+  }
+
+  setProvider(provider: CacheProvider) {
+    this.__provider = Object.assign({}, defaultNoopProvider, provider)
   }
 
   get(key: Key): any {
@@ -19,6 +32,7 @@ export default class Cache implements CacheType {
     const [_key] = this.serializeKey(key)
     this.__cache.set(_key, value)
     this.notify()
+    this.__provider.set(_key, value)
   }
 
   keys() {
@@ -33,12 +47,14 @@ export default class Cache implements CacheType {
   clear() {
     this.__cache.clear()
     this.notify()
+    this.__provider.clear()
   }
 
   delete(key: Key) {
     const [_key] = this.serializeKey(key)
     this.__cache.delete(_key)
     this.notify()
+    this.__provider.set(_key, undefined)
   }
 
   // TODO: introduce namespace for the cache

src/types.ts

@@ -214,3 +214,14 @@ export interface Cache {
   serializeKey(key: Key): [string, any, string, string]
   subscribe(listener: CacheListener): () => void
 }
+
+export type CacheProvider = {
+  initialData?: any
+  set?(key: Key, value: any): void
+  clear?(): void
+}
+
+export type SWRContext = SWRConfiguration & {
+  cache?: CacheProvider
+}
+

src/use-swr.ts

@@ -1,4 +1,5 @@
 import {
+  createElement,
   useCallback,
   useContext,
   useEffect,
@@ -22,7 +23,8 @@ import {
   SWRResponse,
   RevalidatorOptions,
   Trigger,
-  Updater
+  Updater,
+  SWRContext
 } from './types'
 
 const IS_SERVER =
@@ -816,7 +818,24 @@ function useSWR<Data = any, Error = any>(
   return memoizedState
 }
 
-const SWRConfig = SWRConfigContext.Provider
+function SWRConfig(props: React.ProviderProps<SWRContext>) {
+  const onceRef = useRef(false)
+  if (!onceRef.current) {
+    const {
+      value: { cache: cacheProvider }
+    } = props
+    if (cacheProvider) {
+      cache.setProvider(cacheProvider)
+      Object.entries(cacheProvider.initialData || {}).forEach(
+        ([key, value]) => {
+          cache.set(key, value)
+        }
+      )
+    }
+    onceRef.current = true
+  }
+  return createElement(SWRConfigContext.Provider, props)
+}
 
 export { trigger, mutate, SWRConfig }
 export default useSWR

test/use-swr-cache.test.tsx

@@ -1,6 +1,6 @@
 import { act, render, screen } from '@testing-library/react'
 import React from 'react'
-import useSWR, { mutate, cache } from '../src'
+import useSWR, { mutate, cache, SWRConfig } from '../src'
 import Cache from '../src/cache'
 
 describe('useSWR - cache', () => {
@@ -60,3 +60,71 @@ describe('useSWR - cache', () => {
     expect(listener).toHaveBeenCalledTimes(1)
   })
 })
+
+describe('useSWR - UNSTABLE custom cache', () => {
+  it('should consume initial cache state from cache.initialData', async () => {
+    const key = 'custom-cache-1'
+    const cacheProvider = {
+      initialData: { [key]: 1 }
+    }
+
+    function Section() {
+      const { data } = useSWR(key)
+      return <div>data: {data}</div>
+    }
+
+    function Page() {
+      return (
+        <SWRConfig value={{ cache: cacheProvider }}>
+          <Section />
+        </SWRConfig>
+      )
+    }
+
+    render(<Page />)
+    expect(cache.get(key)).toBe(1)
+    await screen.findByText('data: 1')
+  })
+
+  it('should be able to get cache changes through cache.set', async () => {
+    const getKey = _key => 'custom-cache-2-' + _key
+    const fetcher = _key => 'res:' + _key
+    const key1 = getKey('1')
+    const key2 = getKey('2')
+
+    const globalStorage = {}
+    const cacheProvider = {
+      set(_key, _value) {
+        globalStorage[_key] = _value
+      }
+    }
+
+    function Section() {
+      const { data } = useSWR(key1, fetcher)
+
+      return <div>data: {data}</div>
+    }
+
+    function Page() {
+      return (
+        <SWRConfig value={{ cache: cacheProvider }}>
+          <Section />
+        </SWRConfig>
+      )
+    }
+
+    render(<Page />)
+
+    const [, , keyErr1, isValidatingKey1] = cache.serializeKey(key1)
+    const [, , keyErr2] = cache.serializeKey(key2)
+    await act(() => mutate(key2, fetcher(key2)))
+
+    expect(globalStorage).toEqual({
+      [key1]: fetcher(key1),
+      [key2]: fetcher(key2),
+      [keyErr1]: undefined,
+      [keyErr2]: undefined,
+      [isValidatingKey1]: false
+    })
+  })
+})