use-http - npm Package Compare versions

Comparing version 0.1.93 to 0.1.94

dist/Provider.d.ts

@@ -1,7 +0,3 @@
-import React, { ReactElement } from 'react';
-import { FetchContextTypes } from './types';
-interface FetchProviderProps extends FetchContextTypes {
-    children: ReactElement;
-}
+import React from 'react';
+import { FetchProviderProps } from './types';
 export declare const Provider: ({ url, options, graphql, children, }: FetchProviderProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
-export {};

dist/types.d.ts

@@ -0,1 +1,2 @@
+import { ReactElement } from 'react';
 export declare enum HTTPMethod {
@@ -15,5 +16,11 @@ DELETE = "DELETE",
 export interface FetchContextTypes {
+    url: string;
+    options: Options;
+    graphql?: boolean;
+}
+export interface FetchProviderProps {
     url?: string;
-    options?: Options | undefined;
+    options?: Options;
     graphql?: boolean;
+    children: ReactElement;
 }
@@ -53,3 +60,3 @@ export declare type BodyOnly = (body: BodyInit | object) => Promise<any>;
 export declare type Req<TData = any> = ReqMethods & ReqBase<TData>;
-export declare type UseFetchArgs = [(string | OptionsMaybeURL)?, NoUrlOptions?];
+export declare type UseFetchArgs = [(string | OptionsMaybeURL | OverwriteGlobalOptions)?, (NoUrlOptions | OverwriteGlobalOptions)?];
 export declare type UseFetchArrayReturn<TData> = [Req<TData>, Res<TData>, boolean, Error];
@@ -85,3 +92,3 @@ export declare type UseFetchObjectReturn<TData> = ReqBase<TData> & ReqMethods & {
 };
-export declare type OptionsOverwriteWithContext = (options: Options) => Options;
+export declare type OverwriteGlobalOptions = (options: Options) => Options;
 /**
@@ -88,0 +95,0 @@ * Helpers

dist/useFetchArgs.d.ts

@@ -1,2 +0,3 @@
-import { OptionsMaybeURL, NoUrlOptions, Interceptors } from './types';
+import { OptionsMaybeURL, NoUrlOptions } from './types';
+import { Interceptors, OverwriteGlobalOptions } from './types';
 declare type UseFetchArgsReturn = {
@@ -42,3 +43,3 @@ customOptions: {
 };
-export default function useFetchArgs(urlOrOptions?: string | OptionsMaybeURL, optionsNoURLs?: NoUrlOptions): UseFetchArgsReturn;
+export default function useFetchArgs(urlOrOptionsOrOverwriteGlobal?: string | OptionsMaybeURL | OverwriteGlobalOptions, optionsNoURLsOrOverwriteGlobal?: NoUrlOptions | OverwriteGlobalOptions): UseFetchArgsReturn;
 export {};

dist/useFetchArgs.js

@@ -10,2 +10,3 @@ "use strict";
 const FetchContext_1 = __importDefault(require("./FetchContext"));
+const util_1 = require("util");
 exports.useFetchArgsDefaults = {
@@ -36,5 +37,14 @@ customOptions: {
 const defaults = Object.values(exports.useFetchArgsDefaults).reduce((a, o) => (Object.assign(Object.assign({}, a), o)), {});
-function useFetchArgs(urlOrOptions, optionsNoURLs) {
+function useFetchArgs(urlOrOptionsOrOverwriteGlobal, optionsNoURLsOrOverwriteGlobal) {
+    const { isServer } = use_ssr_1.default();
     const context = react_1.useContext(FetchContext_1.default);
-    const { isServer } = use_ssr_1.default();
+    context.options = react_1.useMemo(() => {
+        const overwriteGlobalOptions = (util_1.isFunction(urlOrOptionsOrOverwriteGlobal) ? urlOrOptionsOrOverwriteGlobal : util_1.isFunction(optionsNoURLsOrOverwriteGlobal) && optionsNoURLsOrOverwriteGlobal);
+        if (!overwriteGlobalOptions)
+            return context.options;
+        // make a copy so we make sure not to modify the original context
+        return overwriteGlobalOptions(Object.assign({}, context.options));
+    }, []);
+    const urlOrOptions = urlOrOptionsOrOverwriteGlobal;
+    const optionsNoURLs = optionsNoURLsOrOverwriteGlobal;
     utils_1.invariant(!(utils_1.isObject(urlOrOptions) && utils_1.isObject(optionsNoURLs)), 'You cannot have a 2nd parameter of useFetch when your first argument is an object config.');
@@ -41,0 +51,0 @@ const url = react_1.useMemo(() => {

package.json

 {
   "name": "use-http",
-  "version": "0.1.93",
+  "version": "0.1.94",
   "homepage": "http://use-http.com",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -513,3 +513,3 @@ <a href="http://use-http.com">
   
-  const { get, loading, error, data, response } = useFetch('http://example.com')
+  const { get, loading, error, response } = useFetch('http://example.com')
 
@@ -527,3 +527,3 @@ const handleClick = async () => {
       {loading && "Loading..."}
-      {data && <div>{name}</div>}
+      {name && <div>{name}</div>}
     </>
@@ -537,2 +537,46 @@ )
 
+<details><summary><b>Overwrite/Remove Options/Headers Set in Provider</b></summary>
+    
+This example shows how to remove a header all together. Let's say you have `<Provider url='url.com' options={{ headers: { Authentication: 'Bearer MY_TOKEN' } }}><App /></Provider>`, but for one api call, you don't want that header in your `useFetch` at all for one instance in your app. This would allow you to remove that.
+
+```js
+import useFetch from 'use-http'
+
+const Todos = () => {
+  // let's say for this request, you don't want the `Accept` header at all
+  const { loading, error, data: todos } = useFetch(globalOptions => {
+    delete globalOptions.headers.Accept
+    return {
+      onMount: true,
+      data: [],
+      ...globalOptions
+    }
+  })
+  
+  // can also do this and overwrite the url like this
+  // const { loading, error, data: todos } = useFetch('https://my-new-url.com', globalOptions => {
+  
+  return (
+    <>
+      {error && error.messge}
+      {loading && "Loading..."}
+      {todos && <ul>{todos.map(todo => <li key={todo.id}>{todo.title}</li>)}</ul>}
+    </>
+  )
+}
+
+const App = () => {
+  const options = {
+    headers: {
+      Accept: 'application/json'
+    }
+  }
+  return (
+    <Provider url='https://url.com' options={options}><Todos /></Provider>
+}
+```
+
+</details>
+
+
 Overview
@@ -616,2 +660,4 @@ --------
    - [ ] tests for stale `response` see this [PR](https://github.com/alex-cory/use-http/pull/119/files)
+   - [ ] tests to make sure `response.formData()` and some of the other http `response methods` work properly
+ - [ ] take a look at how [react-apollo-hooks](https://github.com/trojanowski/react-apollo-hooks) work. Maybe ad `useSubscription` and `const request = useFetch(); request.subscribe()` or something along those lines
  - [ ] make this a github package
@@ -680,9 +726,2 @@ - [ ] Make work with React Suspense [current example WIP](https://codesandbox.io/s/7ww5950no0)
   ```
-  - [ ] add callback to completely overwrite options. Let's say you have `<Provider url='url.com' options={{ headers: 'Authentication': 'Bearer MY_TOKEN' }}><App /></Provider>`, but for one api call, you don't want that header in your `useFetch` at all for one instance in your app. This would allow you to remove that
-  ```jsx
-  const request = useFetch('https://url.com', globalOptions => {
-    delete globalOptions.headers.Authorization
-    return globalOptions
-  })
-  ```
   - [ ] make code editor plugin/package/extension that adds GraphQL syntax highlighting for `useQuery` and `useMutation` 😊
@@ -689,0 +728,0 @@

No alert changes

Improved metrics

Total package byte prevSize

82835

increased by3.03%

Lines of code

779

increased by1.83%

Number of lines in readme file

783

increased by5.24%

No dependency changes