use-http - npm Package Compare versions

Comparing version 0.1.67 to 0.1.68

dist/useDelete.d.ts

 import { Options } from './useFetch';
-export declare const useDelete: (url: string, options?: Options | undefined) => (boolean | ((fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>) | null)[] & {
-    data: null;
+export declare const useDelete: <TData = any>(url: string, options?: Options | undefined) => any[] & {
+    data: TData | undefined;
     loading: boolean;
-    error: null;
-    del: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-    delete: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
+    error: any;
+    del: import("./useFetch").FetchData;
+    delete: import("./useFetch").FetchData;
 };

dist/useDelete.js

@@ -7,6 +7,7 @@ "use strict";
 const useFetch_1 = __importDefault(require("./useFetch"));
+const types_1 = require("./types");
 exports.useDelete = (url, options) => {
-    const { data, loading, error, del } = useFetch_1.default(url, Object.assign({ method: 'DELETE' }, options));
+    const { data, loading, error, del } = useFetch_1.default(url, Object.assign({ method: types_1.HTTPMethod.DELETE }, options));
     return Object.assign([data, loading, error, del], { data, loading, error, del, delete: del });
 };
 //# sourceMappingURL=useDelete.js.map

dist/useFetch.d.ts

@@ -8,38 +8,30 @@ export interface Options {
 }
-declare type useFetchArg1 = string | Options & RequestInit;
-export declare function useFetch(arg1: useFetchArg1, arg2?: Options | RequestInit): (boolean | {
-    get: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-    post: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-    patch: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-    put: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-    del: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-    delete: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-    abort: () => void;
+export declare type FetchData = (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
+export declare type UseFetch<TData> = {
+    data?: TData;
+    loading: boolean;
+    error?: any;
+    get: FetchData;
+    post: FetchData;
+    patch: FetchData;
+    put: FetchData;
+    del: FetchData;
+    delete: FetchData;
     query: (query?: string | undefined, variables?: object | undefined) => Promise<void>;
     mutate: (mutation?: string | undefined, variables?: object | undefined) => Promise<void>;
-} | null)[] & {
-    get: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-    post: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-    patch: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-    put: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-    del: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-    delete: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
     abort: () => void;
-    query: (query?: string | undefined, variables?: object | undefined) => Promise<void>;
-    mutate: (mutation?: string | undefined, variables?: object | undefined) => Promise<void>;
-    data: null;
-    loading: boolean;
-    error: null;
     request: {
-        get: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-        post: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-        patch: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-        put: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-        del: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-        delete: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
-        abort: () => void;
+        get: FetchData;
+        post: FetchData;
+        patch: FetchData;
+        put: FetchData;
+        del: FetchData;
+        delete: FetchData;
         query: (query?: string | undefined, variables?: object | undefined) => Promise<void>;
         mutate: (mutation?: string | undefined, variables?: object | undefined) => Promise<void>;
+        abort: () => void;
     };
 };
+declare type useFetchArg1 = string | Options & RequestInit;
+export declare function useFetch<TData = any>(arg1: useFetchArg1, arg2?: Options | RequestInit): UseFetch<TData>;
 export default useFetch;

dist/useFetch.js

@@ -15,4 +15,6 @@ "use strict";
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -26,2 +28,3 @@ };
 const URLContext_1 = __importDefault(require("./URLContext"));
+const types_1 = require("./types");
 const isObject = (obj) => Object.prototype.toString.call(obj) === '[object Object]';
@@ -34,3 +37,3 @@ function useFetch(arg1, arg2) {
     let baseUrl = '';
-    let method = 'GET';
+    let method = types_1.HTTPMethod.GET;
     const handleOptions = (opts) => {
@@ -64,6 +67,6 @@ if (true) {
     }
-    const [data, setData] = react_1.useState(null);
+    const [data, setData] = react_1.useState();
     const [loading, setLoading] = react_1.useState(onMount);
-    const [error, setError] = react_1.useState(null);
-    const controller = react_1.useRef(null);
+    const [error, setError] = react_1.useState();
+    const controller = react_1.useRef();
     const fetchData = react_1.useCallback((method) => (fArg1, fArg2) => __awaiter(this, void 0, void 0, function* () {
@@ -89,3 +92,3 @@ if ('AbortController' in window) {
             setLoading(true);
-            const response = yield fetch(url + query, Object.assign({ method }, context.options, options, { headers: Object.assign({ 'Content-Type': 'application/json' }, (context.options || {}).headers, options.headers) }));
+            const response = yield fetch(url + query, Object.assign({ method }, context.options, options, { headers: Object.assign({ 'Accept': 'application/json' }, (context.options || {}).headers, options.headers) }));
             let data = null;
@@ -109,7 +112,7 @@ try {
     }), [url]);
-    const get = react_1.useCallback(fetchData('GET'), []);
-    const post = react_1.useCallback(fetchData('POST'), []);
-    const patch = react_1.useCallback(fetchData('PATCH'), []);
-    const put = react_1.useCallback(fetchData('PUT'), []);
-    const del = react_1.useCallback(fetchData('DELETE'), []);
+    const get = react_1.useCallback(fetchData(types_1.HTTPMethod.GET), []);
+    const post = react_1.useCallback(fetchData(types_1.HTTPMethod.POST), []);
+    const patch = react_1.useCallback(fetchData(types_1.HTTPMethod.PATCH), []);
+    const put = react_1.useCallback(fetchData(types_1.HTTPMethod.PUT), []);
+    const del = react_1.useCallback(fetchData(types_1.HTTPMethod.DELETE), []);
     const query = react_1.useCallback((query, variables) => post({ query, variables }), []);
@@ -126,3 +129,3 @@ const mutate = react_1.useCallback((mutation, variables) => post({ mutation, variables }), []);
     }, []);
-    return Object.assign([data, loading, error, request], Object.assign({ data, loading, error, request, abort }, request));
+    return Object.assign([data, loading, error, request], Object.assign({ data, loading, error, request }, request));
 }
@@ -129,0 +132,0 @@ exports.useFetch = useFetch;

dist/useGet.d.ts

 import { Options } from './useFetch';
-export declare const useGet: (url: string, options?: Options | undefined) => (boolean | ((fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>) | null)[] & {
-    data: null;
+export declare const useGet: <TData = any>(url: string, options?: Options | undefined) => any[] & {
+    data: TData | undefined;
     loading: boolean;
-    error: null;
-    get: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
+    error: any;
+    get: import("./useFetch").FetchData;
 };

dist/useGet.js

@@ -7,6 +7,7 @@ "use strict";
 const useFetch_1 = __importDefault(require("./useFetch"));
+const types_1 = require("./types");
 exports.useGet = (url, options) => {
-    const { data, loading, error, get } = useFetch_1.default(url, Object.assign({ method: 'GET' }, options));
+    const { data, loading, error, get } = useFetch_1.default(url, Object.assign({ method: types_1.HTTPMethod.GET }, options));
     return Object.assign([data, loading, error, get], { data, loading, error, get });
 };
 //# sourceMappingURL=useGet.js.map

dist/usePatch.d.ts

 import { Options } from './useFetch';
-export declare const usePatch: (url: string, options?: Options | undefined) => (boolean | ((fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>) | null)[] & {
-    data: null;
+export declare const usePatch: <TData = any>(url: string, options?: Options | undefined) => any[] & {
+    data: TData | undefined;
     loading: boolean;
-    error: null;
-    patch: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
+    error: any;
+    patch: import("./useFetch").FetchData;
 };

dist/usePatch.js

@@ -7,6 +7,7 @@ "use strict";
 const useFetch_1 = __importDefault(require("./useFetch"));
+const types_1 = require("./types");
 exports.usePatch = (url, options) => {
-    const { data, loading, error, patch } = useFetch_1.default(url, Object.assign({ method: 'PATCH' }, options));
+    const { data, loading, error, patch } = useFetch_1.default(url, Object.assign({ method: types_1.HTTPMethod.PATCH }, options));
     return Object.assign([data, loading, error, patch], { data, loading, error, patch });
 };
 //# sourceMappingURL=usePatch.js.map

dist/usePost.d.ts

 import { Options } from './useFetch';
-export declare const usePost: (url: string, options?: Options | undefined) => (boolean | ((fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>) | null)[] & {
-    data: null;
+export declare const usePost: <TData = any>(url: string, options?: Options | undefined) => any[] & {
+    data: TData | undefined;
     loading: boolean;
-    error: null;
-    post: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
+    error: any;
+    post: import("./useFetch").FetchData;
 };

dist/usePost.js

@@ -7,6 +7,7 @@ "use strict";
 const useFetch_1 = __importDefault(require("./useFetch"));
+const types_1 = require("./types");
 exports.usePost = (url, options) => {
-    const { data, loading, error, post } = useFetch_1.default(url, Object.assign({ method: 'POST' }, options));
+    const { data, loading, error, post } = useFetch_1.default(url, Object.assign({ method: types_1.HTTPMethod.POST }, options));
     return Object.assign([data, loading, error, post], { data, loading, error, post });
 };
 //# sourceMappingURL=usePost.js.map

dist/usePut.d.ts

 import { Options } from './useFetch';
-export declare const usePut: (url: string, options?: Options | undefined) => (boolean | ((fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>) | null)[] & {
-    data: null;
+export declare const usePut: <TData = any>(url: string, options?: Options | undefined) => any[] & {
+    data: TData | undefined;
     loading: boolean;
-    error: null;
-    put: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
+    error: any;
+    put: import("./useFetch").FetchData;
 };

dist/usePut.js

@@ -7,6 +7,7 @@ "use strict";
 const useFetch_1 = __importDefault(require("./useFetch"));
+const types_1 = require("./types");
 exports.usePut = (url, options) => {
-    const { data, loading, error, put } = useFetch_1.default(url, Object.assign({ method: 'PUT' }, options));
+    const { data, loading, error, put } = useFetch_1.default(url, Object.assign({ method: types_1.HTTPMethod.PUT }, options));
     return Object.assign([data, loading, error, put], { data, loading, error, put });
 };
 //# sourceMappingURL=usePut.js.map

package.json

 {
   "name": "use-http",
-  "version": "0.1.67",
+  "version": "0.1.68",
   "homepage": "https://codesandbox.io/embed/km04k9k9x5",
@@ -16,9 +16,13 @@ "main": "dist/index.js",
   "devDependencies": {
+    "@testing-library/react": "^8.0.1",
     "@types/fetch-mock": "^7.2.3",
     "@types/jest": "^24.0.12",
-    "@types/react": "^16.8.8",
+    "@types/node": "^12.0.10",
+    "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
-    "fetch-mock": "^7.3.1",
     "jest": "^24.7.1",
-    "react-hooks-testing-library": "^0.5.0",
+    "jest-fetch-mock": "^2.1.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-hooks-testing-library": "^0.6.0",
     "ts-jest": "^24.0.0",
@@ -30,3 +34,5 @@ "typescript": "^3.4.5"
     "build": "rm -rf dist && ./node_modules/.bin/tsc --module CommonJS",
-    "test": "tsc -p . --noEmit && tsc -p ./src/__tests__ && jest"
+    "test": "tsc -p . --noEmit && tsc -p ./src/__tests__ && jest -c ./config/jest.config.js --env=jsdom",
+    "test:watch": "jest -c ./config/jest.config.js --env=jsdom --watch",
+    "clean": "npm prune; yarn cache clean; rm -rf ./node_modules package-lock.json yarn.lock; yarn"
   },
@@ -33,0 +39,0 @@ "files": [

README.md

@@ -55,3 +55,3 @@
 - GraphQL support (queries + mutations)
-- Provider to set default a `url` and `options`
+- Provider to set default `url` and `options`
 
@@ -127,3 +127,3 @@ ### Examples
   headers: {
-    'Content-type': 'application/json; charset=UTF-8'
+    'Accept': 'application/json; charset=UTF-8'
   }
@@ -179,3 +179,3 @@ })
       <button onClick={() => getTodosForUser('theUsersID')}>Get User's Todos</button>
-      {!request.loading ? 'Loading...' : <pre>{request.data}</pre>}
+      {request.loading ? 'Loading...' : <pre>{request.data}</pre>}
     </>
@@ -208,3 +208,3 @@ )
       <button onClick={createTodo}>Create Todo</button>
-      {!request.loading ? 'Loading...' : <pre>{request.data}</pre>}
+      {request.loading ? 'Loading...' : <pre>{request.data}</pre>}
     </>
@@ -238,3 +238,3 @@ )
       <button onClick={() => getTodosForUser('theUsersID')}>Get User's Todos</button>
-      {!request.loading ? 'Loading...' : <pre>{request.data}</pre>}
+      {request.loading ? 'Loading...' : <pre>{request.data}</pre>}
     </>
@@ -259,3 +259,3 @@ )
   
-  const createtodo = () => mutate({ todoTitle })
+  const createTodo = () => mutate({ todoTitle })
 
@@ -266,3 +266,3 @@ return (
       <button onClick={createTodo}>Create Todo</button>
-      {!loading ? 'Loading...' : <pre>{data}</pre>}
+      {loading ? 'Loading...' : <pre>{data}</pre>}
     </>
@@ -403,13 +403,24 @@ )
  - [ ] Allow option to fetch on server instead of just having `loading` state
- - [ ] Allow option for callback for response.json() vs response.text()
  - [ ] add `timeout`
  - [ ] add `debounce`
- - [ ] if 2nd param of `post` or one of the methods is a `string` treat it as query params
- - [ ] error handling if no url is passed
  - [ ] tests
- - [ ] github page/website
+ - [ ] ERROR handling: if doing `useQuery('my query')` without specifiying a URL in the Provider, throw error
+ - [ ] change URLContext -> FetchContext or something along those lines
+ - [ ] add array destructuring return types
+ - [ ] github page/website for docs + show comparison with Apollo
  - [ ] fix code so Maintainability is A
  - [ ] optimize badges [see awesome badge list](https://github.com/boennemann/badges)
  - [ ] make GraphQL work with React Suspense
- - [ ] make GraphQL examples
+ - [ ] make GraphQL examples in codesandbox
+ - [ ] maybe add syntax for custom headers like this
+```jsx
+  const user = useFetch()
+  
+  user
+    .headers({
+      auth: jwt
+    })
+    .get()
+
+```
 #### Mutations with Suspense <sup>(Not Implemented Yet)</sup>
@@ -429,3 +440,4 @@ ```jsx
 
-  const createtodo = () => mutation.read({ todoTitle })
+  // ideally, I think it should be mutation.write({ todoTitle }) since mutation ~= POST
+  const createTodo = () => mutation.read({ todoTitle })
   
@@ -432,0 +444,0 @@ if (!request.data) return null

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of package files

39

increased by8.33%

Number of lines in readme file

446

increased by2.76%

Worsened metrics

Total package byte prevSize

44794

decreased by-76.77%

Dev dependency count

13

increased by44.44%

Lines of code

454

decreased by-78.7%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes