Merge pull request #157 from danybeltran/feat-custom-fetcher

danybeltran · web-flow · commit a61c35c1775d · 2023-02-02T19:52:48.000-06:00
Feat custom fetcher
diff --git a/README.md b/README.md
@@ -16,9 +16,13 @@ With one hook call, you get all the information about a request that you can use
 ```jsx
 import useFetch from "http-react"
 
+// This is the default
+const fetcher = (url, config) => fetch(url, config)
+
 export default function App() {
   const { data, loading, error, responseTime } = useFetch("/api/user-info", {
-    refresh: '30 sec'
+    refresh: '30 sec',
+    fetcher
   })
 
   if (loading) return <p>Loading</p>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "http-react",
-  "version": "2.9.9",
+  "version": "3.0.0",
   "description": "React hooks for data fetching",
   "main": "dist/index.js",
   "scripts": {
diff --git a/src/hooks/use-fetch.ts b/src/hooks/use-fetch.ts
@@ -117,17 +117,19 @@ export function useFetch<FetchDataType = any, BodyType = any>(
     onResolve,
     onAbort,
     refresh = isDefined(ctx.refresh) ? ctx.refresh : 0,
-    cancelOnChange = true,
     attempts = ctx.attempts,
     attemptInterval = ctx.attemptInterval,
     revalidateOnFocus = ctx.revalidateOnFocus,
     suspense: $suspense,
     onFetchStart = ctx.onFetchStart,
     onFetchEnd = ctx.onFetchEnd,
     cacheIfError = ctx.cacheIfError,
-    maxCacheAge = ctx.maxCacheAge
+    maxCacheAge = ctx.maxCacheAge,
+    fetcher = ctx.fetcher
   } = optionsConfig
 
+  const $fetch = isFunction(fetcher) ? fetcher : fetch
+
   const config = {
     query,
     params,
@@ -535,44 +537,50 @@ export function useFetch<FetchDataType = any, BodyType = any>(
             cacheProvider.set('requestStart' + resolvedDataKey, Date.now())
             requestInitialTimes[resolvedDataKey] = Date.now()
 
-            const r = isRequest
-              ? new Request(realUrl + c.query, {
-                  ...ctx,
-                  ...reqConfig,
-                  ...optionsConfig,
-                  signal: (() => {
-                    return newAbortController.signal
-                  })(),
-                  headers: {
-                    'Content-Type': 'application/json',
-                    ...ctx.headers,
-                    ..._headers,
-                    ...config.headers,
-                    ...c.headers
+            const newRequestConfig = (
+              isRequest
+                ? {
+                    ...ctx,
+                    ...reqConfig,
+                    ...optionsConfig,
+                    signal: (() => {
+                      return newAbortController.signal
+                    })(),
+                    headers: {
+                      'Content-Type': 'application/json',
+                      ...ctx.headers,
+                      ..._headers,
+                      ...config.headers,
+                      ...c.headers
+                    }
                   }
-                } as any)
-              : new Request(realUrl + c.query, {
-                  ...ctx,
-                  ...optionsConfig,
-                  signal: (() => {
-                    return newAbortController.signal
-                  })(),
-                  body: isFunction(formatBody)
-                    ? // @ts-ignore // If formatBody is a function
-                      formatBody(optionsConfig?.body as any)
-                    : optionsConfig?.body,
-                  headers: {
-                    'Content-Type': 'application/json',
-                    ...ctx.headers,
-                    ...config.headers,
-                    ...c.headers
+                : {
+                    ...ctx,
+                    ...optionsConfig,
+                    signal: (() => {
+                      return newAbortController.signal
+                    })(),
+                    body: isFunction(formatBody)
+                      ? // @ts-ignore // If formatBody is a function
+                        formatBody(optionsConfig?.body as any)
+                      : optionsConfig?.body,
+                    headers: {
+                      'Content-Type': 'application/json',
+                      ...ctx.headers,
+                      ...config.headers,
+                      ...c.headers
+                    }
                   }
-                })
+            ) as any
+
+            const r = new Request(realUrl + c.query, newRequestConfig)
+
             if (logStart) {
               ;(onFetchStart as any)(r, optionsConfig, ctx)
             }
 
-            const json = await fetch(r)
+            // @ts-ignore - This could use 'axios' or something similar
+            const json = await $fetch(r.url, newRequestConfig)
 
             const resolvedDate = Date.now()
 
@@ -587,7 +595,7 @@ export function useFetch<FetchDataType = any, BodyType = any>(
 
             lastResponses[resolvedKey] = json
 
-            const code = json.status
+            const code = json.status as number
             statusCodes[resolvedKey] = code
 
             $$error = false
@@ -599,7 +607,8 @@ export function useFetch<FetchDataType = any, BodyType = any>(
               code
             }
 
-            const _data = await (resolver as any)(json)
+            // @ts-ignore - 'data' is priority because 'fetcher' can return it
+            const _data = json?.['data'] ?? (await (resolver as any)(json))
             if (code >= 200 && code < 400) {
               hasData[resolvedDataKey] = true
               hasData[resolvedKey] = true
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -11,6 +11,16 @@ export type HTTP_METHODS =
   | 'UNLINK'
 
 export type FetchContextType = {
+  fetcher?(
+    url: string,
+    config: FetchConfigType
+  ): Promise<{
+    json?: any
+    data?: any
+    status?: number
+    blob?: any
+    text?: any
+  }>
   headers?: any
   baseUrl?: string
   /**
@@ -78,8 +88,7 @@ export type RequestWithBody = <R = any, BodyType = any>(
   /**
    * The request configuration
    */
-  reqConfig?: Omit<RequestInit, 'body'> & {
-    body?: BodyType
+  reqConfig?: Omit<RequestInit & FetchConfigType<R, BodyType>, 'suspense'> & {
     /**
      * Default value
      */
@@ -91,7 +100,7 @@ export type RequestWithBody = <R = any, BodyType = any>(
     /**
      * The function that formats the body
      */
-    formatBody?(b: BodyType): any
+    formatBody?: any
     /**
      * Request params (like Express)
      */
@@ -114,7 +123,7 @@ export type RequestWithBody = <R = any, BodyType = any>(
   error: any
   data: R
   config: RequestInit
-  code: number
+  status: number
   res: CustomResponse<R>
 }>
 
@@ -136,12 +145,24 @@ export type ImperativeFetch = {
   purge: RequestWithBody
   link: RequestWithBody
   unlink: RequestWithBody
+  config?: FetchContextType & FetchInit
 }
 
 export type FetchConfigType<FetchDataType = any, BodyType = any> = Omit<
   RequestInit,
-  'body'
+  'body' | 'headers'
 > & {
+  headers?: any
+  fetcher?(
+    url: string,
+    config: FetchConfigType<FetchDataType, BodyType>
+  ): Promise<{
+    json?: any
+    data?: any
+    status?: number
+    blob?: any
+    text?: any
+  }>
   body?: BodyType
   /**
    * Any serializable id. This is optional.
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -62,21 +62,24 @@ export const createImperativeFetch = (ctx: FetchContextType) => {
 
   const { baseUrl } = ctx
 
-  return Object.fromEntries(
-    new Map(
-      keys.map(k => [
-        k.toLowerCase(),
-        (url, config = {}) =>
-          (useFetch as any)[k.toLowerCase()](
-            hasBaseUrl(url) ? url : baseUrl + url,
-            {
-              ...ctx,
-              ...config
-            }
-          )
-      ])
-    )
-  ) as ImperativeFetch
+  return {
+    ...Object.fromEntries(
+      new Map(
+        keys.map(k => [
+          k.toLowerCase(),
+          (url, config = {}) =>
+            (useFetch as any)[k.toLowerCase()](
+              hasBaseUrl(url) ? url : baseUrl + url,
+              {
+                ...ctx,
+                ...config
+              }
+            )
+        ])
+      )
+    ),
+    config: ctx
+  } as ImperativeFetch
 }
 
 /**
diff --git a/src/utils/shared.ts b/src/utils/shared.ts
@@ -121,6 +121,7 @@ export function createRequestFn(
       headers,
       query = {},
       body,
+      method: $method = method,
       formatBody,
       resolver = DEFAULT_RESOLVER,
       onResolve = () => {},
@@ -134,7 +135,7 @@ export function createRequestFn(
       .join('&')
 
     const reqConfig = {
-      method,
+      method: $method,
       headers: {
         'Content-Type': 'application/json',
         ...$headers,
@@ -170,7 +171,7 @@ export function createRequestFn(
           res: req,
           data: def,
           error: true,
-          code: req?.status,
+          status: req?.status,
           config: {
             ...init,
             url: `${baseUrl || ''}${rawUrl}`,
@@ -184,7 +185,7 @@ export function createRequestFn(
           res: req,
           data: data,
           error: false,
-          code: req?.status,
+          status: req?.status,
           config: {
             ...init,
             url: `${baseUrl || ''}${rawUrl}`,
@@ -199,7 +200,7 @@ export function createRequestFn(
         res: r,
         data: def,
         error: true,
-        code: r?.status,
+        status: r?.status,
         config: {
           ...init,
           url: requestUrl,
@@ -226,21 +227,24 @@ const createImperativeFetch = (ctx: FetchContextType) => {
 
   const { baseUrl } = ctx
 
-  return Object.fromEntries(
-    new Map(
-      keys.map(k => [
-        k.toLowerCase(),
-        (url, config = {}) =>
-          (Client as any)[k.toLowerCase()](
-            hasBaseUrl(url) ? url : baseUrl + url,
-            {
-              ...ctx,
-              ...config
-            }
-          )
-      ])
-    )
-  ) as ImperativeFetch
+  return {
+    ...Object.fromEntries(
+      new Map(
+        keys.map(k => [
+          k.toLowerCase(),
+          (url: string, config = {}) =>
+            (Client as any)[k.toLowerCase()](
+              hasBaseUrl(url) ? url : baseUrl + url,
+              {
+                ...ctx,
+                ...config
+              }
+            )
+        ])
+      )
+    ),
+    config: ctx
+  } as ImperativeFetch
 }
 
 /**

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "http-react",`
`3`		`- "version": "2.9.9",`
	`3`	`+ "version": "3.0.0",`
`4`	`4`	`"description": "React hooks for data fetching",`
`5`	`5`	`"main": "dist/index.js",`
`6`	`6`	`"scripts": {`