use-http - npm Package Compare versions

Comparing version 0.1.68 to 0.1.70

dist/index.d.ts

@@ -11,2 +11,2 @@ export { default } from './useFetch';
 export * from './Provider';
-export * from './URLContext';
+export * from './FetchContext';

dist/index.js

@@ -17,3 +17,3 @@ "use strict";
 __export(require("./Provider"));
-__export(require("./URLContext"));
+__export(require("./FetchContext"));
 //# sourceMappingURL=index.js.map

dist/Provider.js

@@ -15,3 +15,3 @@ "use strict";
 const use_ssr_1 = __importDefault(require("use-ssr"));
-const URLContext_1 = __importDefault(require("./URLContext"));
+const FetchContext_1 = __importDefault(require("./FetchContext"));
 exports.Provider = ({ url, options, graphql = false, children }) => {
@@ -29,4 +29,4 @@ const { isBrowser } = use_ssr_1.default();
     }), [url, options, graphql]);
-    return (react_1.default.createElement(URLContext_1.default.Provider, { value: defaults }, children));
+    return (react_1.default.createElement(FetchContext_1.default.Provider, { value: defaults }, children));
 };
 //# sourceMappingURL=Provider.js.map

dist/types.d.ts

@@ -10,1 +10,29 @@ export declare enum HTTPMethod {
 }
+export interface Options {
+    url?: string;
+    onMount?: boolean;
+    method?: string;
+    timeout?: number;
+    baseUrl?: string;
+}
+export declare type FetchData = (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
+export declare type FetchCommands = {
+    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;
+};
+export declare type DestructuringCommands<TData = any> = [TData | undefined, boolean, any, FetchCommands];
+export declare type UseFetchResult<TData = any> = FetchCommands & {
+    data?: TData;
+    loading: boolean;
+    error?: any;
+    request: FetchCommands;
+};
+export declare type useFetchArg1 = string | Options & RequestInit;
+export declare type UseFetch<TData> = DestructuringCommands<TData> & UseFetchResult<TData>;

dist/useDelete.d.ts

@@ -1,8 +0,8 @@
-import { Options } from './useFetch';
-export declare const useDelete: <TData = any>(url: string, options?: Options | undefined) => any[] & {
+import { Options } from './types';
+export declare const useDelete: <TData = any>(url?: string | undefined, options?: Options | undefined) => any[] & {
     data: TData | undefined;
     loading: boolean;
     error: any;
-    del: import("./useFetch").FetchData;
-    delete: import("./useFetch").FetchData;
+    del: import("./types").FetchData;
+    delete: import("./types").FetchData;
 };

dist/useDelete.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const useFetch_1 = __importDefault(require("./useFetch"));
+const react_1 = require("react");
+const _1 = __importStar(require("."));
 const types_1 = require("./types");
+const utils_1 = require("./utils");
 exports.useDelete = (url, options) => {
-    const { data, loading, error, del } = useFetch_1.default(url, Object.assign({ method: types_1.HTTPMethod.DELETE }, options));
+    const context = react_1.useContext(_1.FetchContext);
+    utils_1.useURLRequiredInvariant(!!url && !!context.url, 'useDelete');
+    const { data, loading, error, del } = _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

@@ -1,36 +0,3 @@
-export interface Options {
-    url?: string;
-    onMount?: boolean;
-    method?: string;
-    timeout?: number;
-    baseUrl?: string;
-}
-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>;
-    abort: () => void;
-    request: {
-        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>;
+import { Options, UseFetch, useFetchArg1 } from "./types";
+export declare function useFetch<TData = any>(arg1?: useFetchArg1, arg2?: Options | RequestInit): UseFetch<TData>;
 export default useFetch;

dist/useFetch.js

@@ -26,7 +26,8 @@ "use strict";
 const react_1 = require("react");
-const URLContext_1 = __importDefault(require("./URLContext"));
+const FetchContext_1 = __importDefault(require("./FetchContext"));
 const types_1 = require("./types");
-const isObject = (obj) => Object.prototype.toString.call(obj) === '[object Object]';
+const utils_1 = require("./utils");
 function useFetch(arg1, arg2) {
-    const context = react_1.useContext(URLContext_1.default);
+    const context = react_1.useContext(FetchContext_1.default);
+    utils_1.invariant(!!arg1 && !!context.url, 'The first argument of useFetch is required unless you have a global url setup like: <Provider url="https://example.com"></Provider>');
     let url = context.url || null;
@@ -37,3 +38,3 @@ let options = {};
     let method = types_1.HTTPMethod.GET;
-    const handleOptions = (opts) => {
+    const handleOptions = react_1.useCallback((opts) => {
         if (true) {
@@ -55,12 +56,13 @@ // take out all the things that are not normal `fetch` options
             baseUrl = opts.baseUrl;
-    };
+    }, []);
     if (typeof arg1 === 'string') {
         // if we have a default url from context, and
-        // arg1 is a string, we treat it as a relative route
-        url = context.url ? context.url + arg1 : arg1;
-        if (arg2 && isObject(arg2))
+        // arg1 is a string, and we're not using graphql
+        // we treat arg1 as a relative route
+        url = context.url && !context.graphql ? context.url + arg1 : arg1;
+        if (arg2 && utils_1.isObject(arg2))
             handleOptions(arg2);
     }
-    else if (isObject(arg1)) {
-        handleOptions(arg1);
+    else if (utils_1.isObject(arg1)) {
+        handleOptions(arg1 || {});
     }
@@ -71,3 +73,3 @@ const [data, setData] = react_1.useState();
     const controller = react_1.useRef();
-    const fetchData = react_1.useCallback((method) => (fArg1, fArg2) => __awaiter(this, void 0, void 0, function* () {
+    const fetchData = react_1.useCallback((method) => (fetchArg1, fetchArg2) => __awaiter(this, void 0, void 0, function* () {
         if ('AbortController' in window) {
@@ -79,16 +81,18 @@ controller.current = new AbortController();
         // post | patch | put | etc.
-        if (isObject(fArg1) && method.toLowerCase() !== 'get') {
-            options.body = JSON.stringify(fArg1);
+        if (utils_1.isObject(fetchArg1) && method.toLowerCase() !== 'get') {
+            options.body = JSON.stringify(fetchArg1);
             // relative routes
         }
-        else if (baseUrl && typeof fArg1 === 'string') {
-            url = baseUrl + fArg1;
-            if (isObject(fArg2))
-                options.body = JSON.stringify(fArg2);
+        else if (baseUrl && typeof fetchArg1 === 'string') {
+            url = baseUrl + fetchArg1;
+            if (utils_1.isObject(fetchArg2))
+                options.body = JSON.stringify(fetchArg2);
         }
-        if (typeof fArg1 === 'string' && typeof fArg2 === 'string')
-            query = fArg2;
+        if (typeof fetchArg1 === 'string' && typeof fetchArg2 === 'string')
+            query = fetchArg2;
         try {
             setLoading(true);
-            const response = yield fetch(url + query, Object.assign({ method }, context.options, options, { headers: Object.assign({ 'Accept': 'application/json' }, (context.options || {}).headers, options.headers) }));
+            const response = yield fetch(url + query, Object.assign({ method }, context.options, options, { headers: Object.assign({ 
+                    // default content types http://bit.ly/2N2ovOZ
+                    Accept: 'application/json', 'Content-Type': 'application/json' }, (context.options || {}).headers, options.headers) }));
             let data = null;
@@ -95,0 +99,0 @@ try {

dist/useGet.d.ts

@@ -1,7 +0,7 @@
-import { Options } from './useFetch';
-export declare const useGet: <TData = any>(url: string, options?: Options | undefined) => any[] & {
+import { Options } from './types';
+export declare const useGet: <TData = any>(url?: string | undefined, options?: Options | undefined) => any[] & {
     data: TData | undefined;
     loading: boolean;
     error: any;
-    get: import("./useFetch").FetchData;
+    get: import("./types").FetchData;
 };

dist/useGet.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const useFetch_1 = __importDefault(require("./useFetch"));
+const react_1 = require("react");
+const _1 = __importStar(require("."));
 const types_1 = require("./types");
+const utils_1 = require("./utils");
 exports.useGet = (url, options) => {
-    const { data, loading, error, get } = useFetch_1.default(url, Object.assign({ method: types_1.HTTPMethod.GET }, options));
+    const context = react_1.useContext(_1.FetchContext);
+    utils_1.useURLRequiredInvariant(!!url && !!context.url, 'useGet');
+    const { data, loading, error, get } = _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/useMutation.d.ts

@@ -1,25 +0,77 @@
-export declare const useMutation: <TData = any>(arg1: string, arg2: string) => any[] & {
-    mutate: (inputs: any) => Promise<void>;
+export declare const useMutation: <TData = any>(arg1: string | TemplateStringsArray, arg2?: string | undefined) => any[] & {
+    mutate: (inputs?: object | undefined) => Promise<void>;
+    0: TData | undefined;
+    1: boolean;
+    2: any;
+    3: import("./types").FetchCommands;
+    length: 4;
+    toString: (() => string) & (() => string);
+    toLocaleString: (() => string) & (() => string);
+    pop(): any;
+    push(...items: any[]): number;
+    concat(...items: ConcatArray<any>[]): any[];
+    concat(...items: any[]): any[];
+    join(separator?: string | undefined): string;
+    reverse(): any[];
+    shift(): any;
+    slice(start?: number | undefined, end?: number | undefined): any[];
+    sort(compareFn?: ((a: any, b: any) => number) | undefined): import("./types").UseFetch<TData>;
+    splice(start: number, deleteCount?: number | undefined): any[];
+    splice(start: number, deleteCount: number, ...items: any[]): any[];
+    unshift(...items: any[]): number;
+    indexOf(searchElement: any, fromIndex?: number | undefined): number;
+    lastIndexOf(searchElement: any, fromIndex?: number | undefined): number;
+    every(callbackfn: (value: any, index: number, array: any[]) => unknown, thisArg?: any): boolean;
+    some(callbackfn: (value: any, index: number, array: any[]) => unknown, thisArg?: any): boolean;
+    forEach(callbackfn: (value: any, index: number, array: any[]) => void, thisArg?: any): void;
+    map<U>(callbackfn: (value: any, index: number, array: any[]) => U, thisArg?: any): U[];
+    filter<S extends any>(callbackfn: (value: any, index: number, array: any[]) => value is S, thisArg?: any): S[];
+    filter(callbackfn: (value: any, index: number, array: any[]) => unknown, thisArg?: any): any[];
+    reduce(callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any): any;
+    reduce(callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any, initialValue: any): any;
+    reduce<U>(callbackfn: (previousValue: U, currentValue: any, currentIndex: number, array: any[]) => U, initialValue: U): U;
+    reduceRight(callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any): any;
+    reduceRight(callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any, initialValue: any): any;
+    reduceRight<U>(callbackfn: (previousValue: U, currentValue: any, currentIndex: number, array: any[]) => U, initialValue: U): U;
+    find<S extends any>(predicate: (this: void, value: any, index: number, obj: any[]) => value is S, thisArg?: any): S | undefined;
+    find(predicate: (value: any, index: number, obj: any[]) => unknown, thisArg?: any): any;
+    findIndex(predicate: (value: any, index: number, obj: any[]) => unknown, thisArg?: any): number;
+    fill(value: any, start?: number | undefined, end?: number | undefined): import("./types").UseFetch<TData>;
+    copyWithin(target: number, start: number, end?: number | undefined): import("./types").UseFetch<TData>;
+    [Symbol.iterator](): IterableIterator<any>;
+    entries(): IterableIterator<[number, any]>;
+    keys(): IterableIterator<number>;
+    values(): IterableIterator<any>;
+    [Symbol.unscopables](): {
+        copyWithin: boolean;
+        entries: boolean;
+        fill: boolean;
+        find: boolean;
+        findIndex: boolean;
+        keys: boolean;
+        values: boolean;
+    };
+    includes(searchElement: any, fromIndex?: number | undefined): boolean;
+    flatMap<U, This = undefined>(callback: (this: This, value: any, index: number, array: any[]) => U | readonly U[], thisArg?: This | undefined): U[];
+    flat<U>(this: U[][][][][][][][], depth: 7): U[];
+    flat<U>(this: U[][][][][][][], depth: 6): U[];
+    flat<U>(this: U[][][][][][], depth: 5): U[];
+    flat<U>(this: U[][][][][], depth: 4): U[];
+    flat<U>(this: U[][][][], depth: 3): U[];
+    flat<U>(this: U[][][], depth: 2): U[];
+    flat<U>(this: U[][], depth?: 1 | undefined): U[];
+    flat<U>(this: U[], depth: 0): U[];
+    flat<U>(depth?: number | undefined): any[];
+    get: import("./types").FetchData;
+    post: import("./types").FetchData;
+    patch: import("./types").FetchData;
+    put: import("./types").FetchData;
+    del: import("./types").FetchData;
+    delete: import("./types").FetchData;
+    query: (query?: string | undefined, variables?: object | undefined) => Promise<void>;
+    abort: () => void;
     data?: TData | undefined;
     loading: boolean;
     error?: any;
-    get: import("./useFetch").FetchData;
-    post: import("./useFetch").FetchData;
-    patch: import("./useFetch").FetchData;
-    put: import("./useFetch").FetchData;
-    del: import("./useFetch").FetchData;
-    delete: import("./useFetch").FetchData;
-    query: (query?: string | undefined, variables?: object | undefined) => Promise<void>;
-    abort: () => void;
-    request: {
-        get: import("./useFetch").FetchData;
-        post: import("./useFetch").FetchData;
-        patch: import("./useFetch").FetchData;
-        put: import("./useFetch").FetchData;
-        del: import("./useFetch").FetchData;
-        delete: import("./useFetch").FetchData;
-        query: (query?: string | undefined, variables?: object | undefined) => Promise<void>;
-        mutate: (mutation?: string | undefined, variables?: object | undefined) => Promise<void>;
-        abort: () => void;
-    };
+    request: import("./types").FetchCommands;
 };

dist/useMutation.js

@@ -12,14 +12,29 @@ "use strict";
 const react_1 = require("react");
+const utils_1 = require("./utils");
 exports.useMutation = (arg1, arg2) => {
-    const context = react_1.useContext(_1.URLContext);
+    const context = react_1.useContext(_1.FetchContext);
+    // we should only need to check this on 1st render
+    react_1.useEffect(() => {
+        if (Array.isArray(arg1)) {
+            utils_1.invariant(!!context.url, 'You need to wrap your application with <Provider url="https://your-site.com"></Provider>');
+        }
+    }, []);
+    // regular no context: useMutation('https://example.com', `graphql MUTATION`)
     let url = arg1;
     let MUTATION = arg2;
-    if (arg1 && !arg2 && context.url) {
+    // tagged template literal with context: useMutation`graphql MUTATION`
+    if (Array.isArray(arg1) && context.url) {
+        utils_1.invariant(!arg2, 'You cannot have a 2nd argument when using tagged template literal syntax with useMutation.');
         url = context.url;
+        MUTATION = arg1[0];
+        // regular with context: useMutation(`graphql MUTATION`)
+    }
+    else if (arg1 && !arg2 && context.url) {
+        url = context.url;
         MUTATION = arg1;
     }
     const request = _1.default(url);
-    const mutate = react_1.useCallback(inputs => request.mutate(MUTATION, inputs), []);
+    const mutate = react_1.useCallback((inputs) => request.mutate(MUTATION, inputs), []);
     return Object.assign([request.data, request.loading, request.error, mutate], Object.assign({}, request, { mutate }));
 };
 //# sourceMappingURL=useMutation.js.map

dist/usePatch.d.ts

@@ -1,7 +0,7 @@
-import { Options } from './useFetch';
-export declare const usePatch: <TData = any>(url: string, options?: Options | undefined) => any[] & {
+import { Options } from './types';
+export declare const usePatch: <TData = any>(url?: string | undefined, options?: Options | undefined) => any[] & {
     data: TData | undefined;
     loading: boolean;
     error: any;
-    patch: import("./useFetch").FetchData;
+    patch: import("./types").FetchData;
 };

dist/usePatch.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const useFetch_1 = __importDefault(require("./useFetch"));
+const react_1 = require("react");
+const _1 = __importStar(require("."));
 const types_1 = require("./types");
+const utils_1 = require("./utils");
 exports.usePatch = (url, options) => {
-    const { data, loading, error, patch } = useFetch_1.default(url, Object.assign({ method: types_1.HTTPMethod.PATCH }, options));
+    const context = react_1.useContext(_1.FetchContext);
+    utils_1.useURLRequiredInvariant(!!url && !!context.url, 'usePatch');
+    const { data, loading, error, patch } = _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

@@ -1,7 +0,7 @@
-import { Options } from './useFetch';
-export declare const usePost: <TData = any>(url: string, options?: Options | undefined) => any[] & {
+import { Options } from './types';
+export declare const usePost: <TData = any>(url?: string | undefined, options?: Options | undefined) => any[] & {
     data: TData | undefined;
     loading: boolean;
     error: any;
-    post: import("./useFetch").FetchData;
+    post: import("./types").FetchData;
 };

dist/usePost.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const useFetch_1 = __importDefault(require("./useFetch"));
+const react_1 = require("react");
+const _1 = __importStar(require("."));
 const types_1 = require("./types");
+const utils_1 = require("./utils");
 exports.usePost = (url, options) => {
-    const { data, loading, error, post } = useFetch_1.default(url, Object.assign({ method: types_1.HTTPMethod.POST }, options));
+    const context = react_1.useContext(_1.FetchContext);
+    utils_1.useURLRequiredInvariant(!!url && !!context.url, 'usePost');
+    const { data, loading, error, post } = _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

@@ -1,7 +0,7 @@
-import { Options } from './useFetch';
-export declare const usePut: <TData = any>(url: string, options?: Options | undefined) => any[] & {
+import { Options } from './types';
+export declare const usePut: <TData = any>(url?: string | undefined, options?: Options | undefined) => any[] & {
     data: TData | undefined;
     loading: boolean;
     error: any;
-    put: import("./useFetch").FetchData;
+    put: import("./types").FetchData;
 };

dist/usePut.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const useFetch_1 = __importDefault(require("./useFetch"));
+const react_1 = require("react");
+const _1 = __importStar(require("."));
 const types_1 = require("./types");
+const utils_1 = require("./utils");
 exports.usePut = (url, options) => {
-    const { data, loading, error, put } = useFetch_1.default(url, Object.assign({ method: types_1.HTTPMethod.PUT }, options));
+    const context = react_1.useContext(_1.FetchContext);
+    utils_1.useURLRequiredInvariant(!!url && !!context.url, 'usePut');
+    const { data, loading, error, put } = _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

dist/useQuery.d.ts

@@ -1,25 +0,77 @@
-export declare const useQuery: <TData = any>(arg1: string, arg2: string) => any[] & {
-    query: (inputs: any) => Promise<void>;
+export declare const useQuery: <TData = any>(arg1: string | TemplateStringsArray, arg2?: string | undefined) => any[] & {
+    query: (inputs?: object | undefined) => Promise<void>;
+    0: TData | undefined;
+    1: boolean;
+    2: any;
+    3: import("./types").FetchCommands;
+    length: 4;
+    toString: (() => string) & (() => string);
+    toLocaleString: (() => string) & (() => string);
+    pop(): any;
+    push(...items: any[]): number;
+    concat(...items: ConcatArray<any>[]): any[];
+    concat(...items: any[]): any[];
+    join(separator?: string | undefined): string;
+    reverse(): any[];
+    shift(): any;
+    slice(start?: number | undefined, end?: number | undefined): any[];
+    sort(compareFn?: ((a: any, b: any) => number) | undefined): import("./types").UseFetch<TData>;
+    splice(start: number, deleteCount?: number | undefined): any[];
+    splice(start: number, deleteCount: number, ...items: any[]): any[];
+    unshift(...items: any[]): number;
+    indexOf(searchElement: any, fromIndex?: number | undefined): number;
+    lastIndexOf(searchElement: any, fromIndex?: number | undefined): number;
+    every(callbackfn: (value: any, index: number, array: any[]) => unknown, thisArg?: any): boolean;
+    some(callbackfn: (value: any, index: number, array: any[]) => unknown, thisArg?: any): boolean;
+    forEach(callbackfn: (value: any, index: number, array: any[]) => void, thisArg?: any): void;
+    map<U>(callbackfn: (value: any, index: number, array: any[]) => U, thisArg?: any): U[];
+    filter<S extends any>(callbackfn: (value: any, index: number, array: any[]) => value is S, thisArg?: any): S[];
+    filter(callbackfn: (value: any, index: number, array: any[]) => unknown, thisArg?: any): any[];
+    reduce(callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any): any;
+    reduce(callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any, initialValue: any): any;
+    reduce<U>(callbackfn: (previousValue: U, currentValue: any, currentIndex: number, array: any[]) => U, initialValue: U): U;
+    reduceRight(callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any): any;
+    reduceRight(callbackfn: (previousValue: any, currentValue: any, currentIndex: number, array: any[]) => any, initialValue: any): any;
+    reduceRight<U>(callbackfn: (previousValue: U, currentValue: any, currentIndex: number, array: any[]) => U, initialValue: U): U;
+    find<S extends any>(predicate: (this: void, value: any, index: number, obj: any[]) => value is S, thisArg?: any): S | undefined;
+    find(predicate: (value: any, index: number, obj: any[]) => unknown, thisArg?: any): any;
+    findIndex(predicate: (value: any, index: number, obj: any[]) => unknown, thisArg?: any): number;
+    fill(value: any, start?: number | undefined, end?: number | undefined): import("./types").UseFetch<TData>;
+    copyWithin(target: number, start: number, end?: number | undefined): import("./types").UseFetch<TData>;
+    [Symbol.iterator](): IterableIterator<any>;
+    entries(): IterableIterator<[number, any]>;
+    keys(): IterableIterator<number>;
+    values(): IterableIterator<any>;
+    [Symbol.unscopables](): {
+        copyWithin: boolean;
+        entries: boolean;
+        fill: boolean;
+        find: boolean;
+        findIndex: boolean;
+        keys: boolean;
+        values: boolean;
+    };
+    includes(searchElement: any, fromIndex?: number | undefined): boolean;
+    flatMap<U, This = undefined>(callback: (this: This, value: any, index: number, array: any[]) => U | readonly U[], thisArg?: This | undefined): U[];
+    flat<U>(this: U[][][][][][][][], depth: 7): U[];
+    flat<U>(this: U[][][][][][][], depth: 6): U[];
+    flat<U>(this: U[][][][][][], depth: 5): U[];
+    flat<U>(this: U[][][][][], depth: 4): U[];
+    flat<U>(this: U[][][][], depth: 3): U[];
+    flat<U>(this: U[][][], depth: 2): U[];
+    flat<U>(this: U[][], depth?: 1 | undefined): U[];
+    flat<U>(this: U[], depth: 0): U[];
+    flat<U>(depth?: number | undefined): any[];
+    get: import("./types").FetchData;
+    post: import("./types").FetchData;
+    patch: import("./types").FetchData;
+    put: import("./types").FetchData;
+    del: import("./types").FetchData;
+    delete: import("./types").FetchData;
+    mutate: (mutation?: string | undefined, variables?: object | undefined) => Promise<void>;
+    abort: () => void;
     data?: TData | undefined;
     loading: boolean;
     error?: any;
-    get: import("./useFetch").FetchData;
-    post: import("./useFetch").FetchData;
-    patch: import("./useFetch").FetchData;
-    put: import("./useFetch").FetchData;
-    del: import("./useFetch").FetchData;
-    delete: import("./useFetch").FetchData;
-    mutate: (mutation?: string | undefined, variables?: object | undefined) => Promise<void>;
-    abort: () => void;
-    request: {
-        get: import("./useFetch").FetchData;
-        post: import("./useFetch").FetchData;
-        patch: import("./useFetch").FetchData;
-        put: import("./useFetch").FetchData;
-        del: import("./useFetch").FetchData;
-        delete: import("./useFetch").FetchData;
-        query: (query?: string | undefined, variables?: object | undefined) => Promise<void>;
-        mutate: (mutation?: string | undefined, variables?: object | undefined) => Promise<void>;
-        abort: () => void;
-    };
+    request: import("./types").FetchCommands;
 };

dist/useQuery.js

@@ -12,14 +12,29 @@ "use strict";
 const react_1 = require("react");
+const utils_1 = require("./utils");
 exports.useQuery = (arg1, arg2) => {
-    const context = react_1.useContext(_1.URLContext);
+    const context = react_1.useContext(_1.FetchContext);
+    // we should only need to check this on 1st render
+    react_1.useEffect(() => {
+        if (Array.isArray(arg1)) {
+            utils_1.invariant(!!context.url, 'You need to wrap your application with <Provider url="https://your-site.com"></Provider>');
+        }
+    }, []);
+    // regular no context: useQuery('https://example.com', `graphql QUERY`)
     let url = arg1;
     let QUERY = arg2;
-    if (arg1 && !arg2 && context.url) {
+    // tagged template literal with context: useQuery`graphql QUERY`
+    if (Array.isArray(arg1) && context.url) {
+        utils_1.invariant(!arg2, 'You cannot have a 2nd argument when using tagged template literal syntax with useQuery.');
         url = context.url;
+        QUERY = arg1[0];
+        // regular with context: useQuery(`graphql QUERY`)
+    }
+    else if (arg1 && !arg2 && context.url) {
+        url = context.url;
         QUERY = arg1;
     }
     const request = _1.default(url);
-    const query = react_1.useCallback(inputs => request.query(QUERY, inputs), []);
+    const query = react_1.useCallback((inputs) => request.query(QUERY, inputs), []);
     return Object.assign([request.data, request.loading, request.error, query], Object.assign({}, request, { query }));
 };
 //# sourceMappingURL=useQuery.js.map

package.json

 {
   "name": "use-http",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "homepage": "https://codesandbox.io/embed/km04k9k9x5",
@@ -11,2 +11,5 @@ "main": "dist/index.js",
   },
+  "dependencies": {
+    "use-ssr": "^1.0.18"
+  },
   "peerDependencies": {
@@ -32,4 +35,5 @@ "react": "^16.8.6",
   "scripts": {
-    "prepublish": "yarn build # runs before publish",
+    "prepublishOnly": "yarn build # runs before publish",
     "build": "rm -rf dist && ./node_modules/.bin/tsc --module CommonJS",
+    "build:watch": "rm -rf dist && ./node_modules/.bin/tsc -w --module CommonJS",
     "test": "tsc -p . --noEmit && tsc -p ./src/__tests__ && jest -c ./config/jest.config.js --env=jsdom",
@@ -88,6 +92,3 @@ "test:watch": "jest -c ./config/jest.config.js --env=jsdom --watch",
     "use-graphql"
-  ],
-  "dependencies": {
-    "use-ssr": "^1.0.18"
-  }
+  ]
 }

README.md

@@ -220,3 +220,3 @@
 function QueryComponent() {
-  const request = useQuery(`
+  const request = useQuery`
     query Todos($userID string!) {
@@ -228,3 +228,3 @@ todos(userID: $userID) {
     }
-  `)
+  `
 
@@ -247,3 +247,3 @@ const getTodosForUser = id => request.query({ userID: id })
   
-  const [data, loading, error, mutate] = useMutation(`
+  const [data, loading, error, mutate] = useMutation`
     mutation CreateTodo($todoTitle string) {
@@ -255,3 +255,3 @@ todo(title: $todoTitle) {
     }
-  `)
+  `
   
@@ -356,2 +356,3 @@ const createTodo = () => mutate({ todoTitle })
 } = useFetch({
+  // accepts all `fetch` options such as headers, method, etc.
   url: 'https://example.com',
@@ -365,2 +366,3 @@ baseUrl: 'https://example.com',
 const [data, loading, error, request] = useFetch({
+  // accepts all `fetch` options such as headers, method, etc.
   url: 'https://example.com',
@@ -400,2 +402,3 @@ baseUrl: 'https://example.com',
  - [ ] Make work with React Suspense [current example WIP](https://codesandbox.io/s/7ww5950no0)
+ - [ ] make work with FormData
  - [ ] get it all working on a SSR codesandbox, this way we can have api to call locally
@@ -405,5 +408,7 @@ - [ ] Allow option to fetch on server instead of just having `loading` state
  - [ ] add `debounce`
+ - [ ] maybe add a `retries: 3` which would specify the amount of times it should retry before erroring out
  - [ ] tests
- - [ ] ERROR handling: if doing `useQuery('my query')` without specifiying a URL in the Provider, throw error
- - [ ] change URLContext -> FetchContext or something along those lines
+ - [ ] ERROR handling:
+   - [ ] if doing `useQuery('my query')` without specifiying a URL in the Provider, throw error
+   - [ ] make sure `options` (as 2nd param) to all hooks is an object, if not `invariant`/throw error
  - [ ] add array destructuring return types
@@ -415,2 +420,3 @@ - [ ] github page/website for docs + show comparison with Apollo
  - [ ] make GraphQL examples in codesandbox
+ - [ ] make cool logo 😜 I kinda want it to move [like this one](https://camo.githubusercontent.com/4f6ca9438a3e45f9b409158503f3deebc86a793d/68747470733a2f2f7265626173736a732e6f72672f6c6f676f2e737667)
  - [ ] maybe add syntax for custom headers like this
@@ -417,0 +423,0 @@ ```jsx

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed 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

Total package byte prevSize

61549

increased by37.4%

Number of package files

42

increased by7.69%

Lines of code

688

increased by51.54%

Number of lines in readme file

452

increased by1.35%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes