type useSWR fetcher

add comments about implementation
add type test scripts for other middleware

Author: promer94

package.json

@@ -46,7 +46,11 @@
     "build:immutable": "bunchee index.ts --cwd immutable -m --no-sourcemap",
     "prepublishOnly": "yarn clean && yarn build",
     "publish-beta": "yarn publish --tag beta",
-    "types:check": "tsc --noEmit",
+    "types:check": "yarn types:check:core && yarn types:check:infinite && yarn types:check:immutable && yarn types:check:fetcher",
+    "types:check:core": "tsc --noEmit",
+    "types:check:infinite": "cd infinite && tsc --noEmit",
+    "types:check:immutable": "cd immutable && tsc --noEmit",
+    "types:check:fetcher": "cd test-type && tsc --noEmit",
     "format": "prettier --write ./**/*.{ts,tsx}",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "yarn lint --fix",
@@ -74,8 +78,8 @@
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "12.0.0",
     "@types/react": "17.0.20",
-    "@typescript-eslint/eslint-plugin": "4.31.0",
-    "@typescript-eslint/parser": "4.31.0",
+    "@typescript-eslint/eslint-plugin": "4.31.1",
+    "@typescript-eslint/parser": "4.31.1",
     "bunchee": "1.7.1",
     "eslint": "6.8.0",
     "eslint-config-prettier": "6.5.0",

src/index.ts

@@ -20,5 +20,7 @@ export {
   SWRHook,
   Fetcher,
   MutatorCallback,
-  Middleware
+  Middleware,
+  ValueKey,
+  Result
 } from './types'

src/types.ts

@@ -1,6 +1,46 @@
 import * as revalidateEvents from './constants/revalidate-events'
 
-export type Fetcher<Data> = (...args: any) => Data | Promise<Data>
+export type Result<T = unknown> = T | Promise<T>
+
+export type Fetcher<Data = unknown, Args extends Key = Key> =
+  /**
+   * () => [{ foo: string }, { bar: number }] | null
+   *
+   * () => ( [{ foo: string }, { bar: number } ] as const | null )
+   */
+  Args extends (() => readonly [...infer K] | null)
+    ? ((...args: [...K]) => Result<Data>)
+      /**
+       * [{ foo: string }, { bar: number } ] | null
+       *
+       * [{ foo: string }, { bar: number } ] as const | null
+       */
+    : Args extends (readonly [...infer K])
+    ? ((...args: [...K]) => Result<Data>)
+      /**
+       * () => string | null
+       * () => Record<any, any> | null
+       */
+    : Args extends (() => infer T | null)
+    ? (...args: [T]) => Result<Data>
+      /**
+       *  string | null
+       */
+    : Args extends (string | null)
+      /**
+       * when key is Record<any, any> | null
+       * use { foo: string, bar: number } | null as example
+       *
+       * the fetcher would be
+       * (arg0: string) => any | (arg0: { foo: string, bar: number }) => any
+       * so we add this condition to make (arg0: string) => any to be never
+       */
+    ? Args extends (Record<any, any> | null)
+      ? never
+      : (...args: [string]) => Result<Data>
+    : Args extends (infer T)
+    ? (...args: [T]) => Result<Data>
+    : never
 
 // Configuration types that are only used internally, not exposed to the user.
 export interface InternalConfiguration {
@@ -11,7 +51,8 @@ export interface InternalConfiguration {
 export interface PublicConfiguration<
   Data = any,
   Error = any,
-  Fn extends Fetcher<Data> = Fetcher<Data>
+  Args extends Key = Key,
+  Fn = Fetcher<Data, Args>
 > {
   errorRetryInterval: number
   errorRetryCount?: number
@@ -35,22 +76,22 @@ export interface PublicConfiguration<
   isPaused: () => boolean
   onLoadingSlow: (
     key: string,
-    config: Readonly<PublicConfiguration<Data, Error>>
+    config: Readonly<PublicConfiguration<Data, Error, Args, Fn>>
   ) => void
   onSuccess: (
     data: Data,
     key: string,
-    config: Readonly<PublicConfiguration<Data, Error>>
+    config: Readonly<PublicConfiguration<Data, Error, Args, Fn>>
   ) => void
   onError: (
     err: Error,
     key: string,
-    config: Readonly<PublicConfiguration<Data, Error>>
+    config: Readonly<PublicConfiguration<Data, Error, Args, Fn>>
   ) => void
   onErrorRetry: (
     err: Error,
     key: string,
-    config: Readonly<PublicConfiguration<Data, Error>>,
+    config: Readonly<PublicConfiguration<Data, Error, Args, Fn>>,
     revalidate: Revalidator,
     revalidateOpts: Required<RevalidatorOptions>
   ) => void
@@ -67,29 +108,51 @@ export type ConfigOptions = {
   initFocus: (callback: () => void) => (() => void) | void
   initReconnect: (callback: () => void) => (() => void) | void
 }
-
-export type SWRHook = <Data = any, Error = any>(
-  ...args:
-    | readonly [Key]
-    | readonly [Key, Fetcher<Data> | null]
-    | readonly [Key, SWRConfiguration<Data, Error> | undefined]
-    | readonly [
-        Key,
-        Fetcher<Data> | null,
-        SWRConfiguration<Data, Error> | undefined
-      ]
-) => SWRResponse<Data, Error>
+export interface SWRHook {
+  <Data = any, Error = any, Args extends Key = Key>(args: Args): SWRResponse<
+    Data,
+    Error
+  >
+  <Data = any, Error = any, Args extends Key = Key>(
+    args: Args,
+    fn: Fetcher<Data, Args> | null
+  ): SWRResponse<Data, Error>
+  <Data = any, Error = any, Args extends Key = Key>(
+    args: Args,
+    config: SWRConfiguration<Data, Error, Args, Fetcher<Data, Args>> | undefined
+  ): SWRResponse<Data, Error>
+  <Data = any, Error = any, Args extends Key = Key>(
+    args: Args,
+    fn: Fetcher<Data, Args>,
+    config: SWRConfiguration<Data, Error, Args, Fetcher<Data, Args>>
+  ): SWRResponse<Data, Error>
+  <Data = any, Error = any, Args extends Key = Key>(
+    ...args:
+      | [Args]
+      | [Args, Fetcher<Data, Args> | null]
+      | [
+          Args,
+          SWRConfiguration<Data, Error, Args, Fetcher<Data, Args>> | undefined
+        ]
+      | [
+          Args,
+          Fetcher<Data, Key> | null,
+          SWRConfiguration<Data, Error, Args, Fetcher<Data, Args>>
+        ]
+  ): SWRResponse<Data, Error>
+}
 
 // Middlewares guarantee that a SWRHook receives a key, fetcher, and config as the argument
 type SWRHookWithMiddleware = <Data = any, Error = any>(
   key: Key,
-  fetcher: Fetcher<Data> | null,
+  fetcher: Fetcher<Data, Key> | null,
   config: SWRConfiguration<Data, Error>
 ) => SWRResponse<Data, Error>
 
 export type Middleware = (useSWRNext: SWRHook) => SWRHookWithMiddleware
-
-export type ValueKey = string | any[] | object | null
+export type TupleKey = [any, ...unknown[]] | readonly [any, ...unknown[]]
+export type ValueKey = string | null | TupleKey | Record<any, any>
+export type Key = ValueKey | (() => ValueKey)
 
 export type MutatorCallback<Data = any> = (
   currentValue?: Data
@@ -142,10 +205,9 @@ export type KeyedMutator<Data> = (
 export type SWRConfiguration<
   Data = any,
   Error = any,
-  Fn extends Fetcher<Data> = Fetcher<Data>
-> = Partial<PublicConfiguration<Data, Error, Fn>>
-
-export type Key = ValueKey | (() => ValueKey)
+  Args extends Key = Key,
+  Fn = Fetcher<any, Args>
+> = Partial<PublicConfiguration<Data, Error, Args, Fn>>
 
 export interface SWRResponse<Data, Error> {
   data?: Data
@@ -157,6 +219,7 @@ export interface SWRResponse<Data, Error> {
 export type KeyLoader<Data = any> =
   | ((index: number, previousPageData: Data | null) => ValueKey)
   | null
+
 export interface RevalidatorOptions {
   retryCount?: number
   dedupe?: boolean

src/use-swr.ts

@@ -173,7 +173,7 @@ export const useSWRHandler = <Data = any, Error = any>(
 
           // Start the request and keep the timestamp.
           CONCURRENT_PROMISES_TS[key] = getTimestamp()
-          CONCURRENT_PROMISES[key] = fn.apply(fn, fnArgs)
+          CONCURRENT_PROMISES[key] = fn(...fnArgs)
         }
 
         // Wait until the ongoing request is done. Deduplication is also

src/utils/normalize-args.ts

@@ -4,10 +4,10 @@ import { Key, Fetcher, SWRConfiguration } from '../types'
 
 export const normalize = <KeyType = Key, Data = any>(
   args:
-    | readonly [KeyType]
-    | readonly [KeyType, Fetcher<Data> | null]
-    | readonly [KeyType, SWRConfiguration | undefined]
-    | readonly [KeyType, Fetcher<Data> | null, SWRConfiguration | undefined]
+    | [KeyType]
+    | [KeyType, Fetcher<Data> | null]
+    | [KeyType, SWRConfiguration | undefined]
+    | [KeyType, Fetcher<Data> | null, SWRConfiguration | undefined]
 ): [KeyType, Fetcher<Data> | null, Partial<SWRConfiguration<Data>>] => {
   return isFunction(args[1])
     ? [args[0], args[1], args[2] || {}]

src/utils/serialize.ts

@@ -3,7 +3,7 @@ import { isFunction } from './helper'
 
 import { Key } from '../types'
 
-export const serialize = (key: Key): [string, any, string, string] => {
+export const serialize = (key: Key): [string, any[], string, string] => {
   if (isFunction(key)) {
     try {
       key = key()

src/utils/with-middleware.ts

@@ -9,10 +9,10 @@ export const withMiddleware = (
 ): SWRHook => {
   return <Data = any, Error = any>(
     ...args:
-      | readonly [Key]
-      | readonly [Key, Fetcher<Data> | null]
-      | readonly [Key, SWRConfiguration | undefined]
-      | readonly [Key, Fetcher<Data> | null, SWRConfiguration | undefined]
+      | [Key]
+      | [Key, Fetcher<Data> | null]
+      | [Key, SWRConfiguration | undefined]
+      | [Key, Fetcher<Data> | null, SWRConfiguration | undefined]
   ) => {
     const [key, fn, config] = normalize(args)
     config.use = (config.use || []).concat(middleware)