async-fetch 0.2.4 → 0.2.7

package/README.md

@@ -56,9 +56,10 @@ The minimum requirement for the hook is a url string as the first argument. The
 | initialError   | Any      | Initial state for the error constant.                                                                           |         |
 | deps           | Array    | List of dependencies to run the request on.                                                                     |         |
 | poll           | Number   | Number of milliseconds to wait for polling requests.                                                            |         |
+| cachetime      | Number   | Number of milliseconds to cache responses for.                                                                  | 60000   |
+| timeout        | Number   | Number of milliseconds to wait before canceling the request.                                                    | 30000   |
 | ignoreCleanup  | Boolean  | Whether or not the hook should cleanup on component unmount.                                                    |         |
 | ignoreRequest  | Boolean  | Whether or not the request should send.                                                                         |         |
-| timeout        | Number   | Number of milliseconds to wait before canceling the request.                                                    | 30000   |
 | query          | Object   | JSON object to append to the url as query params.                                                               |         |
 | params         | Object   | JSON object to append to the url as query params.                                                               |         |
 | data           | Object   | JSON object to send in the request body.                                                                        |         |
@@ -77,7 +78,3 @@ The minimum requirement for the hook is a url string as the first argument. The
 | data          | Any      | The response data.                       |
 | sendRequest   | Function | Function to send the request manually.   |
 | cancelRequest | Function | Function to cancel the request manually. |
-
-### Next.js
-
-For the hook to work properly in a Next.js project you must turn `reactStrictMode` to false in your `next.config.js`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "async-fetch",
-  "version": "0.2.4",
+  "version": "0.2.7",
   "description": "Use fetch asynchronously for requests within React components.",
   "main": "useAsyncFetch.js",
   "type": "module",

package/useAsyncFetch.js

@@ -1,16 +1,18 @@
 import { useState, useEffect } from "react";
+import useCache from "./useCache.js";
 import useInterval from "./useInterval.js";
 
-function useAsyncFetch(url, props = {}) {
+function useAsyncFetch(path, props = {}) {
   const {
     initialPending,
     initialData,
     initialError,
     deps = [],
     poll,
+    cachetime = 60000, // 1 minute.
+    timeout = 30000, // 5 minutes.
     ignoreCleanup,
     ignoreRequest,
-    timeout = 30000,
     query,
     params,
     data: data2,
@@ -24,6 +26,8 @@ function useAsyncFetch(url, props = {}) {
 
   const [pending, setPending] = useState(initialPending);
 
+  const [pending2, setPending2] = useState();
+
   const [data, setData] = useState(initialData);
 
   const [error, setError] = useState(initialError);
@@ -32,19 +36,21 @@ function useAsyncFetch(url, props = {}) {
 
   const [unmounted, setUnmounted] = useState(false);
 
+  const cache = useCache(cachetime);
+
   useEffect(() => {
     return cleanupRequest;
   }, []);
 
   useEffect(() => {
     sendRequest();
-  }, [url, query, params, data2, ...deps]);
+  }, [path, ...deps]);
 
   useInterval(() => {
     sendRequest();
   }, poll);
 
-  function cancelRequest(SOURCE) {
+  function cancelRequest() {
     if (cancelSource?.abort) cancelSource.abort();
   }
 
@@ -56,20 +62,28 @@ function useAsyncFetch(url, props = {}) {
   }
 
   async function sendRequest() {
-    if (!url) throw new Error("URL is required.");
+    if (!path) throw new Error("URL is required.");
+
+    if (typeof path !== "string")
+      throw new Error("URL must be of type string.");
 
-    if (typeof url !== "string") throw new Error("URL must be of type string.");
+    if (ignoreRequest !== true) {
+      const controller = new AbortController();
 
-    const controller = new AbortController();
+      fetchProps.signal = controller.signal;
 
-    fetchProps.signal = controller.signal;
+      const requestTimeout = setTimeout(() => {
+        controller.abort();
+      }, timeout);
 
-    const requestTimeout = setTimeout(() => {
-      controller.abort();
-    }, timeout);
+      try {
+        let q = "";
+
+        if (query || params) {
+          if (!path.endsWith("?")) q += "?";
+          q += new URLSearchParams(query || params).toString();
+        }
 
-    try {
-      if (ignoreRequest !== true) {
         const contentType =
           fetchProps.headers?.["Content-Type"] ||
           fetchProps.headers?.["content-type"];
@@ -80,57 +94,73 @@ function useAsyncFetch(url, props = {}) {
           fetchProps.body = JSON.stringify(data2);
         }
 
-        if (query || params) {
-          url += "?" + new URLSearchParams(query || params).toString();
-        }
-
         if (!unmounted) {
-          if (onStart) onStart();
-          if (setPending) setPending(true);
-          if (setError) setError();
+          if (pending) {
+            setPending2(true);
+          } else setPending(true);
+          setError();
           cancelRequest();
           setCancelSource(controller);
+          if (onStart) onStart();
         }
 
-        const response = await fetch(url, fetchProps);
+        const url = path + q;
+
+        const cachedResponse = cache.get(url, fetchProps);
+
+        let parsedResponse = cachedResponse;
 
-        if (!response.ok)
-          throw new Error(
-            JSON.stringify({
-              code: response.status,
-              text: response.statusText,
-              response: await response.text(),
-            })
-          );
+        if (!parsedResponse) {
+          const response = await fetch(url, fetchProps);
 
-        const parsedResponse = await response[parser]();
+          if (!response.ok)
+            throw new Error(
+              JSON.stringify({
+                code: response.status,
+                text: response.statusText,
+                response: await response.text(),
+              })
+            );
+
+          parsedResponse = await response[parser]();
+        }
 
         if (!unmounted) {
-          setCancelSource();
           setData(parsedResponse);
           if (onSuccess) onSuccess(parsedResponse);
+          if (!cachedResponse) cache.set(url, fetchProps, parsedResponse);
+        }
+      } catch (e) {
+        if (!unmounted && e.name !== "AbortError") {
+          let error;
+          try {
+            error = e.toString().replace("Error:", "");
+            error = JSON.parse(error.trim());
+          } catch {
+            error = { response: e.toString(), text: e.toString() };
+          }
+          setError(error);
+          if (onFail) onFail(error);
+        }
+      } finally {
+        clearTimeout(requestTimeout);
+        if (!unmounted) {
+          if (pending) {
+            setPending2();
+          } else setPending();
+          if (onFinish) onFinish();
         }
-      }
-    } catch (error) {
-      if (!unmounted && error.name !== "AbortError") {
-        let errorJson;
-        try {
-          errorJson = error.toString().replace("Error:", "");
-          errorJson = JSON.parse(errorJson.trim());
-        } catch {}
-        setError(errorJson || error);
-        if (onFail) onFail(errorJson || error);
-      }
-    } finally {
-      clearTimeout(requestTimeout);
-      if (!unmounted) {
-        if (setPending) setPending();
-        if (onFinish) onFinish();
       }
     }
   }
 
-  return { pending, data, error, sendRequest, cancelRequest };
+  return {
+    pending: pending || pending2,
+    data,
+    error,
+    sendRequest,
+    cancelRequest,
+  };
 }
 
 export default useAsyncFetch;

package/useCache.js

@@ -0,0 +1,33 @@
+import useInterval from "./useInterval.js";
+
+const cache = {};
+
+function useCache(cachetime) {
+  useInterval(() => {
+    for (let [key, value] of Object.entries(cache))
+      if (value.timestamp + cachetime < new Date().getTime()) delete cache[key];
+  }, cachetime);
+
+  function makeKey(url, fetchProps) {
+    return typeof fetchProps.body === "string" ? url + fetchProps.body : url;
+  }
+
+  function get(url, fetchProps) {
+    if (cachetime) {
+      const key = makeKey(url, fetchProps);
+      return cache[key]?.response;
+    }
+  }
+
+  function set(url, fetchProps, response) {
+    if (cachetime) {
+      const key = makeKey(url, fetchProps);
+      const payload = { timestamp: new Date().getTime(), response };
+      cache[key] = payload;
+    }
+  }
+
+  return { get, set };
+}
+
+export default useCache;