Response fix (#119)

* v0.1.87

* v0.1.88

* v0.1.89

* v0.1.90

* v0.1.91

* fixed the issue where `response === {}` after making a request inside a `handleClick` function. aka the `response` object was stale

* added todo to add tests for this

* array destructuring + documentation fixes

* fix

Author: iamthesiz

README.md

@@ -193,11 +193,15 @@ const App = () => (
 <details open><summary><b>Destructured <code>useFetch</code></b></summary>
 
 ```js
+// the `response` is everything you would expect to be in a normal response from an http request with the `data` field added.
+// ⚠️ The `response` object cannot be destructured! (at least not currently) ️️⚠️
 var [request, response, loading, error] = useFetch('https://example.com')
 
 // want to use object destructuring? You can do that too
 var {
   request,
+  // the `response` is everything you would expect to be in a normal response from an http request with the `data` field added.
+  // ⚠️ The `response` object cannot be destructured! (at least not currently) ️️⚠️
   response,
   loading,
   error,
@@ -227,14 +231,8 @@ var {
   query,  // GraphQL
   abort
 } = request
-
-var {
-  data,
-  ok,
-  headers,
-  ...restOfHttpResponse // everything you would get in a response from an http request
-} = response
 ```
+
 </details>
 
 
@@ -579,6 +577,7 @@ Todos
    - [ ] tests for SSR
    - [ ] tests for FormData (can also do it for react-native at same time. [see here](https://stackoverflow.com/questions/45842088/react-native-mocking-formdata-in-unit-tests))
    - [ ] tests for GraphQL hooks `useMutation` + `useQuery`
+   - [ ] tests for stale `response` see this [PR](https://github.com/alex-cory/use-http/pull/119/files)
  - [ ] make this a github package
  - [ ] Make work with React Suspense [current example WIP](https://codesandbox.io/s/7ww5950no0)
  - [ ] get it all working on a SSR codesandbox, this way we can have api to call locally

docs/README.md

@@ -176,11 +176,15 @@ const App = () => (
 Destructured
 -------------
 ```js
+// the `response` is everything you would expect to be in a normal response from an http request with the `data` field added.
+// ⚠️ The `response` object cannot be destructured! (at least not currently) ️️⚠️
 var [request, response, loading, error] = useFetch('https://example.com')
 
 // want to use object destructuring? You can do that too
 var {
   request,
+  // the `response` is everything you would expect to be in a normal response from an http request with the `data` field added.
+  // ⚠️ The `response` object cannot be destructured! (at least not currently) ️️⚠️
   response,
   loading,
   error,
@@ -210,13 +214,6 @@ var {
   query,  // GraphQL
   abort
 } = request
-
-var {
-  data,
-  ok,
-  headers,
-  ...restOfHttpResponse // everything you would get in a response from an http request
-} = response
 ```
 
 Relative routes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-http",
-  "version": "0.1.90",
+  "version": "0.1.91",
   "homepage": "http://use-http.com",
   "main": "dist/index.js",
   "license": "MIT",

src/useFetch.ts

@@ -15,6 +15,9 @@ import useSSR from 'use-ssr'
 import makeRouteAndOptions from './makeRouteAndOptions'
 import { isEmpty, invariant } from './utils'
 
+const makeResponseProxy = (res = {}) => new Proxy(res, {
+  get: (httpResponse: any, key) => (httpResponse.current || {})[key]
+})
 
 function useFetch<TData = any>(...args: UseFetchArgs): UseFetch<TData> {
   const { customOptions, requestInit, defaults } = useFetchArgs(...args)
@@ -155,8 +158,8 @@ function useFetch<TData = any>(...args: UseFetchArgs): UseFetch<TData> {
   }, [onMount, executeRequest])
 
   return Object.assign<UseFetchArrayReturn<TData>, UseFetchObjectReturn<TData>>(
-    [request, res.current, loading as boolean, error],
-    { request, response: res.current, ...request },
+    [request, makeResponseProxy(res), loading as boolean, error],
+    { request, response: makeResponseProxy(res), ...request },
   )
 }
 

src/useFetchArgs.ts

@@ -116,10 +116,11 @@ export default function useFetchArgs(
     const requestInit = pullOutRequestInit(requestInitOptions)
 
     return {
+      ...useFetchArgsDefaults.requestInit,
       ...contextRequestInit,
       ...requestInit,
       headers: {
-        ...useFetchArgsDefaults.requestInit.headers,
+        ...defaults.headers,
         ...contextRequestInit.headers,
         ...requestInit.headers,
       },