react-fetch-hook - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

dist/useFetch.js

@@ -26,6 +26,11 @@ "use strict";
       var _ref = options || {},
+          depends = _ref.depends,
           preventCallFetch = _ref.preventCallFetch,
-          otherOptions = _objectWithoutProperties(_ref, ["preventCallFetch"]);
+          otherOptions = _objectWithoutProperties(_ref, ["depends", "preventCallFetch"]);
 
-      if (preventCallFetch) {
+      var _preventCallFetch = depends ? depends.reduce(function (accumulator, currentValue) {
+        return accumulator || !currentValue;
+      }, false) : preventCallFetch;
+
+      if (_preventCallFetch) {
         return Promise.resolve();
@@ -32,0 +37,0 @@ }

package.json

 {
   "name": "react-fetch-hook",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "React fetch hook",
@@ -9,3 +9,3 @@ "main": "./dist/index.js",
     "flow:check": "flow check",
-    "test": "jest",
+    "test": "jest --silent",
     "prettier": "prettier \"*/**/*.js\" --ignore-path ./.prettierignore --write && git add . && git status",
@@ -12,0 +12,0 @@ "build": "npm run build:clean && npm run build:lib && npm run build:flow",

README.md

@@ -63,10 +63,22 @@ # react-fetch-hook
 ### Prevent call `fetch`
-For prevent call fetch you can pass *preventCallFetch* prop:
+For prevent call fetch you can pass *depends* prop:
 
 ```javascript
 const {authToken} = useContext(authTokenContext);
+const [someState, setSomeState] = useState(false);
 const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
-    preventCallFetch: !authToken //don't call request, if haven't authToken
+    depends: [!!authToken, someState] //don't call request, if haven't authToken and someState: false
 });
 
 ```
+Motivation: you can apply hooks only at top level of function. 
+Calling hooks inside `if` or `for` statements, or change count of hooks may throw React error.
+```javascript
+// Potential сrash, because may call different count of hooks:
+const {authToken} = useContext(authTokenContext);
+if (!authToken) {
+    return null;
+}
+const { isLoading, data } = useFetch("https://swapi.co/api/people/1");
+
+```

src/__tests__/useFetch.test.js

@@ -106,2 +106,94 @@ import React from "react";
 
+    it("call with url, options with depends", async () => {
+        fetch.mockResponse(JSON.stringify({ data: "12345" }));
+        const options = {
+            headers: {
+                Accept: "application/json, application/xml, text/plain, text/html, *.*",
+                "Content-Type": "application/json; charset=utf-8"
+            }
+        };
+
+        const Component = () => {
+            const result = useFetch("https://google.com", { ...options, depends: [true, false] });
+            return <div>{result.data}</div>;
+        };
+
+        const { container, rerender } = render(<Component />);
+
+        await wait(() => {
+            rerender(<Component />);
+
+            expect(fetch.mock.calls.length).toEqual(0);
+        });
+    });
+
+    it("call with url, options with depends with empty string", async () => {
+        fetch.mockResponse(JSON.stringify({ data: "12345" }));
+        const options = {
+            headers: {
+                Accept: "application/json, application/xml, text/plain, text/html, *.*",
+                "Content-Type": "application/json; charset=utf-8"
+            }
+        };
+
+        const Component = () => {
+            const result = useFetch("https://google.com", { ...options, depends: [""] });
+            return <div>{result.data}</div>;
+        };
+
+        const { container, rerender } = render(<Component />);
+
+        await wait(() => {
+            rerender(<Component />);
+
+            expect(fetch.mock.calls.length).toEqual(0);
+        });
+    });
+
+    it("call with url, options with empty depends", async () => {
+        fetch.mockResponse(JSON.stringify({ data: "12345" }));
+        const options = {
+            headers: {
+                Accept: "application/json, application/xml, text/plain, text/html, *.*",
+                "Content-Type": "application/json; charset=utf-8"
+            }
+        };
+
+        const Component = () => {
+            const result = useFetch("https://google.com", { ...options, depends: [] });
+            return <div>{result.data}</div>;
+        };
+
+        const { container, rerender } = render(<Component />);
+
+        await wait(() => {
+            rerender(<Component />);
+
+            expect(fetch.mock.calls.length).toEqual(1);
+        });
+    });
+
+    it("call with url, options with all true depends", async () => {
+        fetch.mockResponse(JSON.stringify({ data: "12345" }));
+        const options = {
+            headers: {
+                Accept: "application/json, application/xml, text/plain, text/html, *.*",
+                "Content-Type": "application/json; charset=utf-8"
+            }
+        };
+
+        const Component = () => {
+            const result = useFetch("https://google.com", { ...options, depends: [true, true] });
+            return <div>{result.data}</div>;
+        };
+
+        const { container, rerender } = render(<Component />);
+
+        await wait(() => {
+            rerender(<Component />);
+
+            expect(fetch.mock.calls.length).toEqual(1);
+        });
+    });
+
     it("error on throw error", async () => {
@@ -108,0 +200,0 @@ fetch.mockReject(new Error("fake error message"));

src/useFetch.js

@@ -12,3 +12,8 @@ // @flow
     path: RequestInfo,
-    options?: { ...RequestOptions, formatter?: Response => Promise<T>, preventCallFetch?: boolean }
+    options?: {
+        ...RequestOptions,
+        formatter?: Response => Promise<T>,
+        preventCallFetch?: boolean,
+        depends?: Array<boolean>
+    }
 ): TUseFetchResult<T> {
@@ -22,4 +27,7 @@ const defaultFormatter = response => {
     const fetchInstance = formatter => (path, options) => {
-        const { preventCallFetch, ...otherOptions } = options || {};
-        if (preventCallFetch) {
+        const { depends, preventCallFetch, ...otherOptions } = options || {};
+        const _preventCallFetch = depends
+            ? depends.reduce((accumulator, currentValue) => accumulator || !currentValue, false)
+            : preventCallFetch;
+        if (_preventCallFetch) {
             return Promise.resolve();
@@ -26,0 +34,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24107

increased by19.76%

Lines of code

467

increased by21.93%

Number of lines in readme file

84

increased by16.67%

Worsened metrics

Number of medium supply chain risk alerts

27

increased by42.11%

No dependency changes