type useSWRInfinite

Author: ekkoxu

immutable/index.ts

@@ -1,4 +1,4 @@
-import useSWR, { Middleware, SWRHook } from 'swr'
+import useSWR, { Middleware } from 'swr'
 import { withMiddleware } from '../src/utils/with-middleware'
 
 export const immutable: Middleware = useSWRNext => (key, fetcher, config) => {
@@ -9,4 +9,4 @@ export const immutable: Middleware = useSWRNext => (key, fetcher, config) => {
   return useSWRNext(key, fetcher, config)
 }
 
-export default withMiddleware(useSWR as SWRHook, immutable)
+export default withMiddleware(useSWR, immutable)

infinite/index.ts

@@ -8,7 +8,9 @@ import useSWR, {
   Fetcher,
   SWRHook,
   MutatorCallback,
-  Middleware
+  Middleware,
+  ValueKey,
+  Result
 } from 'swr'
 import { useIsomorphicLayoutEffect } from '../src/utils/env'
 import { serialize } from '../src/utils/serialize'
@@ -18,18 +20,20 @@ import { SWRInfiniteConfiguration, SWRInfiniteResponse } from './types'
 
 const INFINITE_PREFIX = '$inf$'
 
-const getFirstPageKey = (getKey: KeyLoader<any>) => {
+const getFirstPageKey = (getKey: KeyLoader) => {
   return serialize(getKey ? getKey(0, null) : null)[0]
 }
 
-export const unstable_serialize = (getKey: KeyLoader<any>) => {
+export const unstable_serialize = (getKey: KeyLoader) => {
   return INFINITE_PREFIX + getFirstPageKey(getKey)
 }
 
-export const infinite = ((<Data, Error>(useSWRNext: SWRHook) => (
-  getKey: KeyLoader<Data>,
+export const infinite = ((<Data, Error, Args extends ValueKey>(
+  useSWRNext: SWRHook
+) => (
+  getKey: KeyLoader<Args>,
   fn: Fetcher<Data> | null,
-  config: typeof SWRConfig.default & SWRInfiniteConfiguration<Data, Error>
+  config: typeof SWRConfig.default & SWRInfiniteConfiguration<Data, Error, Args>
 ): SWRInfiniteResponse<Data, Error> => {
   const rerender = useState({})[1]
   const didMountRef = useRef<boolean>(false)
@@ -135,8 +139,7 @@ export const infinite = ((<Data, Error>(useSWRNext: SWRHook) => (
             !config.compare(originalData[i], pageData))
 
         if (fn && shouldFetchPage) {
-          // @ts-ignore since fn here is union type
-          pageData = await fn.apply(fn, pageArgs)
+          pageData = await fn(...pageArgs)
           cache.set(pageKey, pageData)
         }
 
@@ -247,20 +250,39 @@ export const infinite = ((<Data, Error>(useSWRNext: SWRHook) => (
   } as SWRInfiniteResponse<Data, Error>
 }) as unknown) as Middleware
 
-type SWRInfiniteHook = <Data = any, Error = any>(
-  ...args:
-    | readonly [KeyLoader<Data>]
-    | readonly [KeyLoader<Data>, Fetcher<Data> | null]
-    | readonly [
-        KeyLoader<Data>,
-        SWRInfiniteConfiguration<Data, Error> | undefined
-      ]
-    | readonly [
-        KeyLoader<Data>,
-        Fetcher<Data> | null,
-        SWRInfiniteConfiguration<Data, Error> | undefined
-      ]
-) => SWRInfiniteResponse<Data, Error>
+export type InfiniteFetcher<
+  Args extends ValueKey = ValueKey,
+  Data = unknown
+> = Args extends (readonly [...infer K])
+  ? ((...args: [...K]) => Result<Data>)
+  : Args extends (string | null)
+  ? Args extends (Record<any, any> | null)
+    ? never
+    : (...args: [string]) => Result<Data>
+  : Args extends (infer T)
+  ? (...args: [T]) => Result<Data>
+  : never
+
+interface SWRInfiniteHook {
+  <Data = any, Error = any, Args extends ValueKey = ValueKey>(
+    getKey: KeyLoader<Args>
+  ): SWRInfiniteResponse<Data, Error>
+  <Data = any, Error = any, Args extends ValueKey = ValueKey>(
+    getKey: KeyLoader<Args>,
+    fn: InfiniteFetcher<Args, Data> | null
+  ): SWRInfiniteResponse<Data, Error>
+  <Data = any, Error = any, Args extends ValueKey = ValueKey>(
+    getKey: KeyLoader<Args>,
+    config: SWRInfiniteConfiguration<Data, Error, Args> | undefined
+  ): SWRInfiniteResponse<Data, Error>
+  <Data = any, Error = any, Args extends ValueKey = ValueKey>(
+    ...args: [
+      KeyLoader<Args>,
+      InfiniteFetcher<Args, Data> | null,
+      SWRInfiniteConfiguration<Data, Error, Args> | undefined
+    ]
+  ): SWRInfiniteResponse<Data, Error>
+}
 
 export default withMiddleware(useSWR, infinite) as SWRInfiniteHook
 export { SWRInfiniteConfiguration, SWRInfiniteResponse }

infinite/types.ts

@@ -1,9 +1,10 @@
-import { SWRConfiguration, Fetcher, SWRResponse } from 'swr'
+import { SWRConfiguration, Fetcher, SWRResponse, ValueKey } from 'swr'
 
 export type SWRInfiniteConfiguration<
   Data = any,
-  Error = any
-> = SWRConfiguration<Data[], Error, Fetcher<Data[]>> & {
+  Error = any,
+  Args extends ValueKey = ValueKey
+> = SWRConfiguration<Data[], Error, Args, Fetcher<Data[], Args>> & {
   initialSize?: number
   revalidateAll?: boolean
   persistSize?: boolean

src/types.ts

@@ -10,32 +10,32 @@ export type Fetcher<Data = unknown, Args extends Key = Key> =
    */
   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])
+    : /**
+     * [{ 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)
+    : /**
+     * () => string | null
+     * () => Record<any, any> | null
+     */
+    Args extends (() => infer T | null)
     ? (...args: [T]) => Result<Data>
-      /**
-       *  string | null
-       */
-    : Args extends (string | null)
-      /**
+    : /**
+     *  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)
+      Args extends (Record<any, any> | null)
       ? never
       : (...args: [string]) => Result<Data>
     : Args extends (infer T)
@@ -216,8 +216,8 @@ export interface SWRResponse<Data, Error> {
   isValidating: boolean
 }
 
-export type KeyLoader<Data = any> =
-  | ((index: number, previousPageData: Data | null) => ValueKey)
+export type KeyLoader<Args extends ValueKey = ValueKey> =
+  | ((index: number, previousPageData: any | null) => Args)
   | null
 
 export interface RevalidatorOptions {

src/use-swr.ts

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

test-type/fetcher.ts

@@ -1,4 +1,6 @@
 import useSWR from 'swr'
+import useSWRInfinite from 'swr/infinite'
+
 type ExpectType = <T>(value: T) => void
 const expectType: ExpectType = () => {}
 
@@ -89,6 +91,26 @@ export function useReturnString() {
       return key
     }
   )
+
+  useSWRInfinite(
+    (index, previousPageData: string) => {
+      return `${index}${previousPageData}`
+    },
+    key => {
+      expectType<string>(key)
+      return key
+    }
+  )
+
+  useSWRInfinite(
+    (index, previousPageData: string) => {
+      return truthy() ? `${index}${previousPageData}` : null
+    },
+    key => {
+      expectType<string>(key)
+      return key
+    }
+  )
 }
 
 export function useReturnRecord() {
@@ -106,6 +128,31 @@ export function useReturnRecord() {
       return key
     }
   )
+
+  useSWRInfinite(
+    index => ({
+      index,
+      endPoint: '/api'
+    }),
+    key => {
+      expectType<{ index: number; endPoint: string }>(key)
+      return [key]
+    }
+  )
+
+  useSWRInfinite(
+    index =>
+      truthy()
+        ? {
+            index,
+            endPoint: '/api'
+          }
+        : null,
+    key => {
+      expectType<{ index: number; endPoint: string }>(key)
+      return [key]
+    }
+  )
 }
 
 export function useReturnTuple() {
@@ -123,6 +170,23 @@ export function useReturnTuple() {
       return keys
     }
   )
+
+  useSWRInfinite(
+    index => [{ a: '1', b: { c: '3', d: index } }, [1231, '888']],
+    (...keys) => {
+      expectType<[{ a: string; b: { c: string } }, (string | number)[]]>(keys)
+      return keys[1]
+    }
+  )
+
+  useSWRInfinite(
+    index =>
+      truthy() ? [{ a: '1', b: { c: '3', d: index } }, [1231, '888']] : null,
+    (...keys) => {
+      expectType<[{ a: string; b: { c: string } }, (string | number)[]]>(keys)
+      return keys[1]
+    }
+  )
 }
 
 export function useReturnReadonlyTuple() {
@@ -161,4 +225,40 @@ export function useReturnReadonlyTuple() {
       return keys
     }
   )
+
+  useSWRInfinite(
+    () => [{ a: '1', b: { c: '3' } }, [1231, '888']] as const,
+    (...keys) => {
+      expectType<
+        [
+          {
+            readonly a: '1'
+            readonly b: {
+              readonly c: '3'
+            }
+          },
+          readonly [1231, '888']
+        ]
+      >(keys)
+      return keys
+    }
+  )
+  useSWRInfinite(
+    () =>
+      truthy() ? ([{ a: '1', b: { c: '3' } }, [1231, '888']] as const) : null,
+    (...keys) => {
+      expectType<
+        [
+          {
+            readonly a: '1'
+            readonly b: {
+              readonly c: '3'
+            }
+          },
+          readonly [1231, '888']
+        ]
+      >(keys)
+      return keys[1]
+    }
+  )
 }