async-fetch 0.2.6 → 0.2.8

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.6",
+  "version": "0.2.8",
   "description": "Use fetch asynchronously for requests within React components.",
   "main": "useAsyncFetch.js",
   "type": "module",

package/useAsyncFetch.js

@@ -1,19 +1,21 @@
 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,
-    data: data2,
     query,
     params,
+    data: data2,
     parser = "json",
     onStart,
     onSuccess,
@@ -34,13 +36,15 @@ function useAsyncFetch(url, props = {}) {
 
   const [unmounted, setUnmounted] = useState(false);
 
+  const cache = useCache(cachetime);
+
   useEffect(() => {
     return cleanupRequest;
   }, []);
 
   useEffect(() => {
-    sendRequest();
-  }, [url, query, params, data2, ...deps]);
+    sendRequest("USE_CACHE");
+  }, [path, ...deps]);
 
   useInterval(() => {
     sendRequest();
@@ -57,10 +61,11 @@ function useAsyncFetch(url, props = {}) {
     }
   }
 
-  async function sendRequest() {
-    if (!url) throw new Error("URL is required.");
+  async function sendRequest(constant) {
+    if (!path) throw new Error("URL is required.");
 
-    if (typeof url !== "string") throw new Error("URL must be of type string.");
+    if (typeof path !== "string")
+      throw new Error("URL must be of type string.");
 
     if (ignoreRequest !== true) {
       const controller = new AbortController();
@@ -72,6 +77,13 @@ function useAsyncFetch(url, props = {}) {
       }, timeout);
 
       try {
+        let q = "";
+
+        if (query || params) {
+          if (!path.endsWith("?")) q += "?";
+          q += new URLSearchParams(query || params).toString();
+        }
+
         const contentType =
           fetchProps.headers?.["Content-Type"] ||
           fetchProps.headers?.["content-type"];
@@ -82,36 +94,42 @@ function useAsyncFetch(url, props = {}) {
           fetchProps.body = JSON.stringify(data2);
         }
 
-        if (query || params) {
-          url += "?" + new URLSearchParams(query || params).toString();
-        }
-
         if (!unmounted) {
-          if (onStart) onStart();
           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 =
+          constant === "USE_CACHE" && 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) {
-          if (onSuccess) onSuccess(parsedResponse);
           setData(parsedResponse);
+          if (onSuccess) onSuccess(parsedResponse);
+          if (!cachedResponse) cache.set(url, fetchProps, parsedResponse);
         }
       } catch (e) {
         if (!unmounted && e.name !== "AbortError") {
@@ -122,16 +140,16 @@ function useAsyncFetch(url, props = {}) {
           } catch {
             error = { response: e.toString(), text: e.toString() };
           }
-          if (onFail) onFail(error);
           setError(error);
+          if (onFail) onFail(error);
         }
       } finally {
         clearTimeout(requestTimeout);
         if (!unmounted) {
-          if (onFinish) onFinish();
           if (pending) {
             setPending2();
           } else setPending();
+          if (onFinish) onFinish();
         }
       }
     }

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;