Code refactoring

src/resolve-args.ts

@@ -0,0 +1,41 @@
+import { useContext } from 'react'
+
+import defaultConfig from './config'
+import SWRConfigContext from './config-context'
+
+import { Fetcher } from './types'
+
+// Resolve arguments for SWR hooks.
+// This function itself is a hook because it uses `useContext` inside.
+export default function useArgs<KeyType, ConfigType, Data>(
+  args:
+    | readonly [KeyType]
+    | readonly [KeyType, Fetcher<Data> | null]
+    | readonly [KeyType, ConfigType | undefined]
+    | readonly [KeyType, Fetcher<Data> | null, ConfigType | undefined]
+): [KeyType, (typeof defaultConfig) & ConfigType, Fetcher<Data> | null] {
+  const config = Object.assign(
+    {},
+    defaultConfig,
+    useContext(SWRConfigContext),
+    args.length > 2
+      ? args[2]
+      : args.length === 2 && typeof args[1] === 'object'
+      ? args[1]
+      : {}
+  ) as (typeof defaultConfig) & ConfigType
+
+  // In TypeScript `args.length > 2` is not same as `args.lenth === 3`.
+  // We do a safe type assertion here.
+  const fn = (args.length > 2
+    ? args[1]
+    : args.length === 2 && typeof args[1] === 'function'
+    ? args[1]
+    : // Pass fn as null will disable revalidate
+    // https://paco.sh/blog/shared-hook-state-with-swr
+    args[1] === null
+    ? args[1]
+    : config.fetcher) as Fetcher<Data> | null
+
+  return [args[0], config, fn]
+}

src/use-swr-infinite.ts

@@ -1,9 +1,9 @@
 // TODO: use @ts-expect-error
-import { useContext, useRef, useState, useCallback } from 'react'
+import { useRef, useState, useCallback } from 'react'
 
-import defaultConfig, { cache } from './config'
+import { cache } from './config'
 import { useIsomorphicLayoutEffect } from './env'
-import SWRConfigContext from './swr-config-context'
+import useArgs from './resolve-args'
 import useSWR from './use-swr'
 
 import {
@@ -17,37 +17,22 @@ import {
 function useSWRInfinite<Data = any, Error = any>(
   ...args:
     | readonly [KeyLoader<Data>]
-    | readonly [KeyLoader<Data>, Fetcher<Data>]
+    | readonly [KeyLoader<Data>, Fetcher<Data> | null]
     | readonly [
         KeyLoader<Data>,
         SWRInfiniteConfiguration<Data, Error> | undefined
       ]
     | readonly [
         KeyLoader<Data>,
-        Fetcher<Data>,
+        Fetcher<Data> | null,
         SWRInfiniteConfiguration<Data, Error> | undefined
       ]
 ): SWRInfiniteResponse<Data, Error> {
-  const getKey = args[0]
-
-  const config = Object.assign(
-    {},
-    defaultConfig,
-    useContext(SWRConfigContext),
-    args.length > 2
-      ? args[2]
-      : args.length === 2 && typeof args[1] === 'object'
-      ? args[1]
-      : {}
-  )
-  // in typescript args.length > 2 is not same as args.lenth === 3
-  // we do a safe type assertion here
-  // args.length === 3
-  const fn = (args.length > 2
-    ? args[1]
-    : args.length === 2 && typeof args[1] === 'function'
-    ? args[1]
-    : config.fetcher) as Fetcher<Data>
+  const [getKey, config, fn] = useArgs<
+    KeyLoader<Data>,
+    SWRInfiniteConfiguration<Data, Error>,
+    Data
+  >(args)
 
   const {
     initialSize = 1,
@@ -145,7 +130,7 @@ function useSWRInfinite<Data = any, Error = any>(
             typeof dataRef.current !== 'undefined') ||
           (originalData && !config.compare(originalData[i], pageData))
 
-        if (shouldFetchPage) {
+        if (fn && shouldFetchPage) {
           if (pageArgs !== null) {
             pageData = await fn(...pageArgs)
           } else {

src/use-swr.ts

@@ -1,10 +1,11 @@
 // TODO: use @ts-expect-error
-import { useCallback, useContext, useRef, useDebugValue } from 'react'
+import { useCallback, useRef, useDebugValue } from 'react'
 
 import defaultConfig, { cache } from './config'
 import { IS_SERVER, rAF, useIsomorphicLayoutEffect } from './env'
-import SWRConfigContext from './swr-config-context'
+import SWRConfigContext from './config-context'
 import useStateWithDeps from './state'
+import useArgs from './resolve-args'
 
 import {
   State,
@@ -223,33 +224,10 @@ function useSWR<Data = any, Error = any>(
         SWRConfiguration<Data, Error> | undefined
       ]
 ): SWRResponse<Data, Error> {
-  // Resolve arguments
-  const _key = args[0]
-  const config = Object.assign(
-    {},
-    defaultConfig,
-    useContext(SWRConfigContext),
-    args.length > 2
-      ? args[2]
-      : args.length === 2 && typeof args[1] === 'object'
-      ? args[1]
-      : {}
+  const [_key, config, fn] = useArgs<Key, SWRConfiguration<Data, Error>, Data>(
+    args
   )
 
-  // In TypeScript `args.length > 2` is not same as `args.lenth === 3`.
-  // We do a safe type assertion here.
-  const fn = (args.length > 2
-    ? args[1]
-    : args.length === 2 && typeof args[1] === 'function'
-    ? args[1]
-    : /**
-     * Pass fn as null will disable revalidate
-     * https://paco.sh/blog/shared-hook-state-with-swr
-     */
-    args[1] === null
-    ? args[1]
-    : config.fetcher) as Fetcher<Data> | null
-
   // `key` is the identifier of the SWR `data` state.
   // `keyErr` and `keyValidating` are indentifiers of `error` and `isValidating`
   // which are derived from `key`.