feat(middleware):

Adds the middleware property

package.json

@@ -4,7 +4,7 @@
   "description": "React hooks for data fetching",
   "main": "dist/index.js",
   "scripts": {
-    "test": "tsc && webpack --mode production && jest",
+    "test": "tsc && jest",
     "compile": "tsc"
   },
   "repository": {
@@ -36,22 +36,23 @@
   "license": "MIT",
   "homepage": "https://http-react.netlify.app",
   "devDependencies": {
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@testing-library/react": "^13.1.1",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@types/jest": "^27.4.0",
-    "@types/react": "^18.0.9",
-    "babel-jest": "^27.4.6",
-    "jest": "^27.4.7",
-    "react": ">=16.13.1",
-    "react-dom": ">=16.13.1",
-    "react-test-renderer": "^17.0.2",
-    "ts-jest": "^27.1.3",
-    "ts-loader": "^9.4.2",
-    "typescript": "^4.5.5",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1"
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@testing-library/react": "^15.0.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.79",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "ts-jest": "^29.1.2",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.4.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4"
   },
   "peerDependencies": {
     "react": ">=16.13.1"

src/hooks/use-fetch.ts

@@ -126,7 +126,8 @@ export function useFetch<FetchDataType = any, BodyType = any>(
     onFetchEnd = ctx.onFetchEnd,
     cacheIfError = ctx.cacheIfError,
     maxCacheAge = ctx.maxCacheAge,
-    fetcher = ctx.fetcher
+    fetcher = ctx.fetcher,
+    middleware = ctx.middleware
   } = optionsConfig
 
   const $fetch = isFunction(fetcher) ? fetcher : fetch
@@ -621,7 +622,12 @@ export function useFetch<FetchDataType = any, BodyType = any>(
             }
 
             // @ts-ignore - 'data' is priority because 'fetcher' can return it
-            const _data = json?.['data'] ?? (await (resolver as any)(json))
+            const incoming = json?.['data'] ?? (await (resolver as any)(json))
+
+            const _data = isFunction(middleware)
+              ? await middleware!(incoming as any, thisCache)
+              : incoming
+
             if (code >= 200 && code < 400) {
               hasData.set(resolvedDataKey, true)
               hasData.set(resolvedKey, true)

src/internal/constants.ts

@@ -11,6 +11,7 @@ const RETRY_ON_RECONNECT = true
 const REVALIDATE_ON_MOUNT = true
 const DEFAULT_GRAPHQL_PATH = '/graphql'
 const DEFAULT_RESOLVER = (e: any) => e.json()
+const DEFAULT_MIDDLEWARE = (incoming: any, previous: any) => incoming
 
 const METHODS = {
   GET: 'GET',
@@ -51,5 +52,6 @@ export {
   DEFAULT_GRAPHQL_PATH,
   DEFAULT_RESOLVER,
   METHODS,
-  UNITS_MILISECONDS_EQUIVALENTS
+  UNITS_MILISECONDS_EQUIVALENTS,
+  DEFAULT_MIDDLEWARE
 }

src/internal/index.ts

@@ -6,6 +6,7 @@ import {
   ATTEMPTS,
   ATTEMPT_INTERVAL,
   DEFAULTS,
+  DEFAULT_MIDDLEWARE,
   ONLINE,
   ON_OFFLINE,
   ON_ONLINE,
@@ -168,7 +169,8 @@ const defaultContextVaue: FetchContextType = {
   online: ONLINE,
   retryOnReconnect: RETRY_ON_RECONNECT,
   revalidateOnMount: REVALIDATE_ON_MOUNT,
-  cacheIfError: true
+  cacheIfError: true,
+  middleware: DEFAULT_MIDDLEWARE
 }
 
 export const FetchContext = createContext<FetchContextType>(defaultContextVaue)

src/types/index.ts

@@ -41,6 +41,7 @@ export type FetchContextType = {
   }
   suspense?: any[]
   resolver?: (r: Response) => any
+  middleware?(incomindgData: any, previousData: any): any
   children?: any
   auto?: boolean
   memory?: boolean
@@ -153,6 +154,15 @@ export type FetchConfigType<FetchDataType = any, BodyType = any> = Omit<
   'body' | 'headers'
 > & {
   headers?: any
+  /**
+   * The middleware function should return the data that will be commited to the state. It can be used for pagination, logging, etc.
+   *
+   * It assumes `previousData`, `incomingData` and the returned data have the same type for consistency.
+   */
+  middleware?(
+    incomindgData: FetchDataType,
+    previousData: FetchDataType
+  ): FetchDataType
   fetcher?(
     url: string,
     config: FetchConfigType<FetchDataType, BodyType>

src/utils/shared.ts

@@ -111,12 +111,19 @@ export function setQueryParams(url: string, params: any = {}) {
     .map(paramName => {
       if (Array.isArray(params[paramName])) {
         return params[paramName]
-          .map((p: any) => `${paramName}=${encodeURIComponent(p)}`)
+          .map((p: any) =>
+            typeof p === 'undefined'
+              ? ''
+              : `${paramName}=${encodeURIComponent(p)}`
+          )
+          .filter(Boolean)
           .join('&')
       } else {
+        if (typeof params[paramName] === 'undefined') return ''
         return `${paramName}=${encodeURIComponent(params[paramName])}`
       }
     })
+    .filter(Boolean)
     .join('&')
 
   return (