Custom cache provider

src/cache.ts

@@ -1,96 +1,8 @@
-import { Cache as CacheType, Key, CacheListener } from './types'
-import hash from './libs/hash'
+import { Cache } from './types'
 
-export default class Cache implements CacheType {
-  private cache: Map<string, any>
-  private subs: CacheListener[]
-
-  constructor(initialData: any = {}) {
-    this.cache = new Map(Object.entries(initialData))
-    this.subs = []
-  }
-
-  get(key: Key): any {
-    const [_key] = this.serializeKey(key)
-    return this.cache.get(_key)
-  }
-
-  set(key: Key, value: any): any {
-    const [_key] = this.serializeKey(key)
-    this.cache.set(_key, value)
-    this.notify()
-  }
-
-  keys() {
-    return Array.from(this.cache.keys())
-  }
-
-  has(key: Key) {
-    const [_key] = this.serializeKey(key)
-    return this.cache.has(_key)
-  }
-
-  clear() {
-    this.cache.clear()
-    this.notify()
-  }
-
-  delete(key: Key) {
-    const [_key] = this.serializeKey(key)
-    this.cache.delete(_key)
-    this.notify()
-  }
-
-  // TODO: introduce namespace for the cache
-  serializeKey(key: Key): [string, any, string, string] {
-    let args = null
-    if (typeof key === 'function') {
-      try {
-        key = key()
-      } catch (err) {
-        // dependencies not ready
-        key = ''
-      }
-    }
-
-    if (Array.isArray(key)) {
-      // args array
-      args = key
-      key = hash(key)
-    } else {
-      // convert null to ''
-      key = String(key || '')
-    }
-
-    const errorKey = key ? 'err@' + key : ''
-    const isValidatingKey = key ? 'validating@' + key : ''
-
-    return [key, args, errorKey, isValidatingKey]
-  }
-
-  subscribe(listener: CacheListener) {
-    if (typeof listener !== 'function') {
-      throw new Error('Expected the listener to be a function.')
-    }
-
-    let isSubscribed = true
-    this.subs.push(listener)
-
-    return () => {
-      if (!isSubscribed) return
-      isSubscribed = false
-      const index = this.subs.indexOf(listener)
-      if (index > -1) {
-        this.subs[index] = this.subs[this.subs.length - 1]
-        this.subs.length--
-      }
-    }
-  }
-
-  // Notify Cache subscribers about a change in the cache
-  private notify() {
-    for (let listener of this.subs) {
-      listener()
-    }
-  }
+export function wrapCache<Data = any>(provider: Cache<Data>): Cache {
+  // We might want to inject an extra layer on top of `provider` in the future,
+  // such as key serialization, auto GC, etc.
+  // For now, it's just a `Map` interface without any modifications.
+  return provider
 }

src/config-context.ts

@@ -3,6 +3,6 @@ import { createContext } from 'react'
 import { SWRConfiguration } from './types'
 
 const SWRConfigContext = createContext<SWRConfiguration>({})
-SWRConfigContext.displayName = 'SWRConfigContext'
+SWRConfigContext.displayName = 'SWRConfig'
 
 export default SWRConfigContext

src/config.ts

@@ -1,10 +1,10 @@
 import { dequal } from 'dequal/lite'
-import { Configuration, RevalidatorOptions, Revalidator } from './types'
-import Cache from './cache'
+
+import { wrapCache } from './cache'
 import webPreset from './libs/web-preset'
+import { Configuration, RevalidatorOptions, Revalidator } from './types'
 
-// cache
-const cache = new Cache()
+const fetcher = (url: string) => fetch(url).then(res => res.json())
 
 // error retry
 function onErrorRetry(
@@ -14,7 +14,7 @@ function onErrorRetry(
   revalidate: Revalidator,
   opts: Required<RevalidatorOptions>
 ): void {
-  if (!config.isDocumentVisible()) {
+  if (!webPreset.isDocumentVisible()) {
     // if it's hidden, stop
     // it will auto revalidate when focus
     return
@@ -65,10 +65,10 @@ const defaultConfig = {
   shouldRetryOnError: true,
   suspense: false,
   compare: dequal,
+  fetcher,
 
   isPaused: () => false,
-  ...webPreset
+  cache: wrapCache(new Map())
 } as const
 
-export { cache }
 export default defaultConfig

src/index.ts

@@ -6,9 +6,6 @@ export * from './use-swr'
 // `useSWRInfinite`
 export { useSWRInfinite } from './use-swr-infinite'
 
-// Cache related, to be replaced by the new APIs
-export { cache } from './config'
-
 // Types
 export {
   SWRConfiguration,
@@ -27,6 +24,5 @@ export {
   revalidateType,
   RevalidateOptionInterface,
   keyInterface,
-  responseInterface,
-  CacheInterface
+  responseInterface
 } from './types'

src/libs/serialize.ts

@@ -0,0 +1,28 @@
+import hash from './hash'
+import { Key } from '../types'
+
+export function serialize(key: Key): [string, any, string, string] {
+  let args = null
+  if (typeof key === 'function') {
+    try {
+      key = key()
+    } catch (err) {
+      // dependencies not ready
+      key = ''
+    }
+  }
+
+  if (Array.isArray(key)) {
+    // args array
+    args = key
+    key = hash(key)
+  } else {
+    // convert null to ''
+    key = String(key || '')
+  }
+
+  const errorKey = key ? 'err@' + key : ''
+  const isValidatingKey = key ? 'req@' + key : ''
+
+  return [key, args, errorKey, isValidatingKey]
+}

src/libs/web-preset.ts

@@ -19,8 +19,6 @@ const isDocumentVisible = () => {
   return true
 }
 
-const fetcher = (url: string) => fetch(url).then(res => res.json())
-
 const registerOnFocus = (cb: () => void) => {
   if (
     typeof window !== 'undefined' &&
@@ -54,7 +52,6 @@ const registerOnReconnect = (cb: () => void) => {
 export default {
   isOnline,
   isDocumentVisible,
-  fetcher,
   registerOnFocus,
   registerOnReconnect
 }

src/resolve-args.ts

@@ -13,7 +13,7 @@ export default function useArgs<KeyType, ConfigType, Data>(
     | readonly [KeyType, Fetcher<Data> | null]
     | readonly [KeyType, ConfigType | undefined]
     | readonly [KeyType, Fetcher<Data> | null, ConfigType | undefined]
-): [KeyType, (typeof defaultConfig) & ConfigType, Fetcher<Data> | null] {
+): [KeyType, Fetcher<Data> | null, (typeof defaultConfig) & ConfigType] {
   const config = Object.assign(
     {},
     defaultConfig,
@@ -37,5 +37,5 @@ export default function useArgs<KeyType, ConfigType, Data>(
     ? args[1]
     : config.fetcher) as Fetcher<Data> | null
 
-  return [args[0], config, fn]
+  return [args[0], fn, config]
 }

src/types.ts

@@ -19,9 +19,8 @@ export interface Configuration<
   suspense: boolean
   fetcher: Fn
   initialData?: Data
+  cache: Cache
 
-  isOnline: () => boolean
-  isDocumentVisible: () => boolean
   isPaused: () => boolean
   onLoadingSlow: (
     key: string,
@@ -44,12 +43,17 @@ export interface Configuration<
     revalidate: Revalidator,
     revalidateOpts: Required<RevalidatorOptions>
   ) => void
-  registerOnFocus?: (cb: () => void) => void
-  registerOnReconnect?: (cb: () => void) => void
 
   compare: (a: Data | undefined, b: Data | undefined) => boolean
 }
 
+export interface Preset {
+  isOnline: () => boolean
+  isDocumentVisible: () => boolean
+  registerOnFocus?: (cb: () => void) => void
+  registerOnReconnect?: (cb: () => void) => void
+}
+
 export type ValueKey = string | any[] | null
 
 export type Updater<Data = any, Error = any> = (
@@ -59,7 +63,6 @@ export type Updater<Data = any, Error = any> = (
   shouldDedupe?: boolean,
   dedupe?: boolean
 ) => boolean | Promise<boolean>
-export type Trigger = (key: Key, shouldRevalidate?: boolean) => Promise<any>
 
 export type MutatorCallback<Data = any> = (
   currentValue: undefined | Data
@@ -78,7 +81,23 @@ export type State<Data, Error> = {
   isValidating?: boolean
 }
 
-export type CacheListener = () => void
+export type Mutator<Data = any> = (
+  cache: Cache,
+  key: Key,
+  data?: Data | Promise<Data> | MutatorCallback<Data>,
+  shouldRevalidate?: boolean
+) => Promise<Data | undefined>
+
+export type ScopedMutator<Data> = (
+  key: Key,
+  data?: Data | Promise<Data> | MutatorCallback<Data>,
+  shouldRevalidate?: boolean
+) => Promise<Data | undefined>
+
+export type KeyedMutator<Data> = (
+  data?: Data | Promise<Data> | MutatorCallback<Data>,
+  shouldRevalidate?: boolean
+) => Promise<Data | undefined>
 
 // Public types
 
@@ -109,10 +128,7 @@ export type responseInterface<Data, Error> = {
   data?: Data
   error?: Error
   revalidate: () => Promise<boolean>
-  mutate: (
-    data?: Data | Promise<Data> | MutatorCallback<Data>,
-    shouldRevalidate?: boolean
-  ) => Promise<Data | undefined>
+  mutate: KeyedMutator<Data>
   isValidating: boolean
 }
 export interface SWRResponse<Data, Error> {
@@ -122,10 +138,7 @@ export interface SWRResponse<Data, Error> {
    * @deprecated `revalidate` is deprecated, please use `mutate()` for the same purpose.
    */
   revalidate: () => Promise<boolean>
-  mutate: (
-    data?: Data | Promise<Data> | MutatorCallback<Data>,
-    shouldRevalidate?: boolean
-  ) => Promise<Data | undefined>
+  mutate: KeyedMutator<Data>
   isValidating: boolean
 }
 
@@ -195,26 +208,8 @@ export type Revalidator = (
   revalidateOpts: RevalidatorOptions
 ) => Promise<boolean>
 
-/**
- * @deprecated `CacheInterface` will be renamed to `Cache`.
- */
-export interface CacheInterface {
-  get(key: Key): any
-  set(key: Key, value: any): any
-  keys(): string[]
-  has(key: Key): boolean
-  delete(key: Key): void
-  clear(): void
-  serializeKey(key: Key): [string, any, string, string]
-  subscribe(listener: CacheListener): () => void
-}
-export interface Cache {
-  get(key: Key): any
-  set(key: Key, value: any): any
-  keys(): string[]
-  has(key: Key): boolean
+export interface Cache<Data = any> {
+  get(key: Key): Data | null | undefined
+  set(key: Key, value: Data): void
   delete(key: Key): void
-  clear(): void
-  serializeKey(key: Key): [string, any, string, string]
-  subscribe(listener: CacheListener): () => void
 }

src/use-swr-infinite.ts

@@ -1,8 +1,8 @@
 // TODO: use @ts-expect-error
 import { useRef, useState, useCallback } from 'react'
 
-import { cache } from './config'
 import { useIsomorphicLayoutEffect } from './env'
+import { serialize } from './libs/serialize'
 import useArgs from './resolve-args'
 import useSWR from './use-swr'
 
@@ -28,11 +28,12 @@ function useSWRInfinite<Data = any, Error = any>(
         SWRInfiniteConfiguration<Data, Error> | undefined
       ]
 ): SWRInfiniteResponse<Data, Error> {
-  const [getKey, config, fn] = useArgs<
+  const [getKey, fn, config] = useArgs<
     KeyLoader<Data>,
     SWRInfiniteConfiguration<Data, Error>,
     Data
   >(args)
+  const cache = config.cache
 
   const {
     initialSize = 1,
@@ -44,7 +45,7 @@ function useSWRInfinite<Data = any, Error = any>(
   // get the serialized key of the first page
   let firstPageKey: string | null = null
   try {
-    ;[firstPageKey] = cache.serializeKey(getKey ? getKey(0, null) : null)
+    ;[firstPageKey] = serialize(getKey ? getKey(0, null) : null)
   } catch (err) {
     // not ready
   }
@@ -103,7 +104,7 @@ function useSWRInfinite<Data = any, Error = any>(
       const pageSize = resolvePageSize()
       let previousPageData = null
       for (let i = 0; i < pageSize; ++i) {
-        const [pageKey, pageArgs] = cache.serializeKey(
+        const [pageKey, pageArgs] = serialize(
           getKey ? getKey(i, previousPageData) : null
         )