types: infer provider type as cache type

[huozhi]

• make Cache a type that extends from required provider interface
• make useSWRConfig generic with provider type useSWRConfig<Provider = Cache>
• add typing test

Closes #1502
Closes #1505

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit bdddf3a:

Sandbox	Source
SWR-Basic	Configuration
SWR-States	Configuration
SWR-Infinite	Configuration
SWR-SSR	Configuration

[shuding]

Why string | null instead of just string?

[huozhi]

because swr/infinite has some case that cache key is string | null

like

  const resolvePageSize = useCallback((): number => {
    const cachedPageSize = cache.get(pageSizeCacheKey)
    return isUndefined(cachedPageSize) ? initialSize : cachedPageSize

[shuding]

That feels like a bug (facepalm)

[shuding]

I wonder if there's a way to automatically infer the type, without requiring a generic type to be passed.

[promer94]

This does not look correct to me.

export type Cache<T = DefaultProvider, Data = any> = T extends ICache<Data>
  ? T
  : never

export type CacheProvider<Data = any> = (cache: Cache<Data>) => Cache<Data>

CacheProvider<any> = (cache: Cache<any>) => Cache<any> = (cache: any) => any

We need provider to return a Cache here

[huozhi]

I didn't get what do you mean here. Can you rephrase it more specificly?

[promer94]

Previous

type Provider: (cache: Readonly<Cache>) => Cache
const cache = new Map()
<SWRConfig value={{ provider: () => cache }}>{children}</SWRConfig>
// This will throw type error since { a: foo } does not satisfy the requirement
<SWRConfig value={{ provider: () => {a: foo } }}>{children}</SWRConfig>

Current

type Provider = CacheProvider<any> = (_: any) => any
const cache = new Map()
<SWRConfig value={{ provider: () => cache }}>{children}</SWRConfig>
// This will not throw type error any more
<SWRConfig value={{ provider: () => {a: foo } }}>{children}</SWRConfig>

[promer94]

I think the actual problem here is that we can't safely type the cache without runtime checking.

const { cache } = useSWRConfig()

The cache which is returned from the hook probably does not have the clear interface.

Currently if users want to extend the cache interface. They have to write a type assertion.

// CustomCache.tsx
import type { Cache } from "swr"
import { SWRConfig, useSWRConfig } from "swr"
type MyCustomCache = Map<string, any>

const customCache: MyCustomCache = new Map()

const CustomCacheProvider = ({ children }) => {
  return <SWRConfig value={{ provider: () => cache }}>{children}</SWRConfig>
}
// This is just a example. The actual runtime check might be more complex
function checkCache(cache: Cache): cache is MyCustomCache {
  return cache === c
}

const useCustomCache = () => {
  const { cache } = useSWRConfig()
  if (checkCache(cache)) return cache
  throw new Error("customCache can only be used within CustomCacheProvider")
}

// App.tsx
const ClearButton = () => {
  const cache = useCustomCache()
  return (
    <button
      onClick={() => {
        // type safe and runtime safe
        cache.clear()
      }}
    ></button>
  )
}

const App = () => {
  return (
    <>
      <CustomCacheProvider>
        <ClearButton />
      </CustomCacheProvider>
      {/* <ClearButton/>*/}
    </>
  )
}

We need to find a batter way to help user to extend current cache interface (runtime checking is still required) and provider batter type for default cache.