Merge pull request #183 from shanecav/dofetch-promise

Update doFetch to return a promise that resolves with same value as afterFetch

Author: jamesplease

CHANGELOG.md

@@ -1,10 +1,18 @@
 # Changelog
 
+### v3.1.0 (2018/7/10)
+
+**New Features**
+
+- `doFetch` now returns a Promise that _always_ resolves. The value that it resolves to is
+  the same object that is passed to `afterFetch`. Note that `afterFetch` is only called when a
+  network request has actually been performed, whereas `doFetch` resolves even when the cache is hit.
+
 ### v3.0.1 (2018/4/24)
 
 **Bug Fixes**
 
-* Fixes a bug where `isLazy` would sometimes be computed using previous
+- Fixes a bug where `isLazy` would sometimes be computed using previous
   props rather than the current props.
 
 ### v3.0.0 (2018/4/24)
@@ -14,85 +22,85 @@
 
 **Breaking Changes**
 
-* When a request fails, the `data` from a request will no longer be set to `null`. This
+- When a request fails, the `data` from a request will no longer be set to `null`. This
   allows you to control whether or not your UI continues to display the existing data.
 
-* The `responseType` prop is now more forgiving. If the body cannot be parsed with
+- The `responseType` prop is now more forgiving. If the body cannot be parsed with
   the `responseType` that you set, then `data` will be set to `null`.
 
 ### v2.0.4 (2018/4/20)
 
 **Bug Fixes**
 
-* Fixes a bug where there could be a cache mismatch when re-rendering the same component
+- Fixes a bug where there could be a cache mismatch when re-rendering the same component
   that has a fetch policy configured.
 
 ### v2.0.3 (2018/3/2)
 
 **Bug Fixes**
 
-* Fixes a bug where the `lazy` prop was not always respected. Anytime that a new request key was generated,
+- Fixes a bug where the `lazy` prop was not always respected. Anytime that a new request key was generated,
   a request would be made.
 
 ### v2.0.2 (2018/2/21)
 
 **Bug Fixes**
 
-* Fixes a bug where an Uncaught ReferenceError could be thrown
+- Fixes a bug where an Uncaught ReferenceError could be thrown
 
 ### v2.0.1 (2018/2/17)
 
 **Bug Fixes**
 
-* This fixes a problem where the default `fetchPolicy` would be `"cache-first"` for "write" requests.
+- This fixes a problem where the default `fetchPolicy` would be `"cache-first"` for "write" requests.
 
 ### v2.0.0 (2018/2/17)
 
 **Breaking**
 
-* `transformResponse` has been renamed to be `transformData`
-* `fetchPolicy` is now determined by the method that you pass in. This change was made to support using
+- `transformResponse` has been renamed to be `transformData`
+- `fetchPolicy` is now determined by the method that you pass in. This change was made to support using
   POST methods for read requests, and is unlikely to break your code.
-* A new prop, `cacheResponse`, is used to determine if a response is added to the cache or
+- A new prop, `cacheResponse`, is used to determine if a response is added to the cache or
   not. This is to support using POST methods for read requests, and is unlikely to break your code.
 
 **New Features**
 
-* A new `failed` property is passed to you in the render prop callback. This allows you to
+- A new `failed` property is passed to you in the render prop callback. This allows you to
   quickly determine if a request failed for any reason (be it network errors or "error" status
   codes).
 
 ### v1.1.0 (2018/2/7)
 
 **New Features**
 
-* `responseType` can now be specified as a function. It receives the `response`
+- `responseType` can now be specified as a function. It receives the `response`
   as the first argument.
-* Adds a `requestKey` prop.
-* When the request is "faux-aborted," the error will have a `name` equal to `AbortError`.
+- Adds a `requestKey` prop.
+- When the request is "faux-aborted," the error will have a `name` equal to `AbortError`.
   This matches the name of the native error, allowing you to write future-proof code that
   handles aborted requests.
 
 ### v1.0.0 (2018/2/4)
 
 **Breaking**
 
-* The `responseType` will now be set to `"text"` anytime a response returns
+- The `responseType` will now be set to `"text"` anytime a response returns
   with a 204 status code.
-* The `responseType` is no longer used when creating the request key.
+- The `responseType` is no longer used when creating the request key.
 
 ### v0.3.0 (2018/2/4)
 
 **Changes**
 
-* `fetch-dedupe` has been abstracted into a separate library. This
+- `fetch-dedupe` has been abstracted into a separate library. This
   does not change the public API of this library.
 
 ### v0.2.0 (2018/2/1)
 
 **New Features**
 
-* The render prop will now be passed the `requestKey`.
+- The render prop will now be passed the `requestKey`.
 
 ### v0.1.0 (2018/2/1)
 
@@ -101,4 +109,4 @@ named `render`. Accordingly, this library has been updated to use `children` as
 
 **Breaking**
 
-* `<Fetch/>` now uses `children` as the render prop, rather than `render`.
+- `<Fetch/>` now uses `children` as the render prop, rather than `render`.

README.md

@@ -46,28 +46,28 @@ yarn add react-request
 
 ### Documentation
 
-* [Getting Started](#getting-started)
-* [API](#api)
-  * [\<Fetch/\>](#fetch-)
-  * [fetchDedupe()](#fetchdedupe-input--init--dedupeoptions-)
-  * [getRequestKey()](#getrequestkey-url-method-body-responsetype-)
-  * [isRequestInFlight()](#isrequestinflight-requestkey-)
-  * [clearRequestCache()](#clearrequestcache)
-  * [clearResponseCache()](#clearresponsecache)
-* [Guides ⇗](./docs/guides/INDEX.md)
-  * [Response Caching ⇗](./docs/guides/response-caching.md)
-  * [Request Deduplication ⇗](./docs/guides/request-deduplication.md)
-  * [Request Keys ⇗](./docs/guides/request-keys.md)
-  * [Best Practices ⇗](./docs/guides/best-practices.md)
-  * [Using the `lazy` Prop ⇗](./docs/guides/using-the-lazy-prop.md)
-  * [Aborting ⇗](./docs/guides/aborting.md)
-  * [Differences with `fetch()` ⇗](./docs/guides/differences-with-fetch.md)
-  * [Differences with React Apollo ⇗](./docs/guides/differences-with-apollo.md)
-  * [Integration with Other Technologies ⇗](./docs/guides/integration-with-other-technologies.md)
-* [Examples ⇗](./docs/examples.md)
-* [FAQ ⇗](./docs/FAQ.md)
-* [Roadmap ⇗](./ROADMAP.md)
-* [Acknowledgements](#acknowledgements)
+- [Getting Started](#getting-started)
+- [API](#api)
+  - [\<Fetch/\>](#fetch-)
+  - [fetchDedupe()](#fetchdedupe-input--init--dedupeoptions-)
+  - [getRequestKey()](#getrequestkey-url-method-body-responsetype-)
+  - [isRequestInFlight()](#isrequestinflight-requestkey-)
+  - [clearRequestCache()](#clearrequestcache)
+  - [clearResponseCache()](#clearresponsecache)
+- [Guides ⇗](./docs/guides/INDEX.md)
+  - [Response Caching ⇗](./docs/guides/response-caching.md)
+  - [Request Deduplication ⇗](./docs/guides/request-deduplication.md)
+  - [Request Keys ⇗](./docs/guides/request-keys.md)
+  - [Best Practices ⇗](./docs/guides/best-practices.md)
+  - [Using the `lazy` Prop ⇗](./docs/guides/using-the-lazy-prop.md)
+  - [Aborting ⇗](./docs/guides/aborting.md)
+  - [Differences with `fetch()` ⇗](./docs/guides/differences-with-fetch.md)
+  - [Differences with React Apollo ⇗](./docs/guides/differences-with-apollo.md)
+  - [Integration with Other Technologies ⇗](./docs/guides/integration-with-other-technologies.md)
+- [Examples ⇗](./docs/examples.md)
+- [FAQ ⇗](./docs/FAQ.md)
+- [Roadmap ⇗](./ROADMAP.md)
+- [Acknowledgements](#acknowledgements)
 
 ### Getting Started
 
@@ -124,7 +124,7 @@ class App extends Component {
           <Fetch
             url="https://jsonplaceholder.typicode.com/posts/1"
             method="DELETE"
-          />
+          />,
         ]}>
         {([readPost, deletePost]) => {
           return (
@@ -159,19 +159,19 @@ API as a prop, in addition to a few other things.
 
 The props that come from the `fetch()` method are:
 
-* `url`
-* `method`: defaults to `"GET"`
-* `body`
-* `credentials`
-* `headers`
-* `mode`
-* `cache`
-* `redirect`
-* `referrer`: defaults to `"about:client"`
-* `referrerPolicy`: defaults to `""`
-* `integrity`: defaults to `""`
-* `keepalive`
-* `signal`
+- `url`
+- `method`: defaults to `"GET"`
+- `body`
+- `credentials`
+- `headers`
+- `mode`
+- `cache`
+- `redirect`
+- `referrer`: defaults to `"about:client"`
+- `referrerPolicy`: defaults to `""`
+- `integrity`: defaults to `""`
+- `keepalive`
+- `signal`
 
 To learn more about the valid options for these props, refer to the
 [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch)
@@ -185,7 +185,7 @@ The following example demonstrates some of the most commonly-used props that com
   method="patch"
   credentials="same-origin"
   headers={{
-    'csrf-token': myCsrfToken
+    'csrf-token': myCsrfToken,
   }}
   body={JSON.stringify({ title: 'New post' })}>
   {({ doFetch }) => {
@@ -201,34 +201,37 @@ In addition to the `fetch()` props, there are a number of other useful props.
 The [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) of this component.
 It is called with one argument, `result`, an object with the following keys:
 
-* `fetching`: A Boolean representing whether or not a request is currently in flight for this component
-* `failed`: A Boolean representing whether or not the request failed for any reason. This includes network
+- `fetching`: A Boolean representing whether or not a request is currently in flight for this component
+- `failed`: A Boolean representing whether or not the request failed for any reason. This includes network
   errors and status codes that are greater than or equal to`400`.
-* `error`: An error object representing a network error occurred. Note that HTTP "error" status codes do not
+- `error`: An error object representing a network error occurred. Note that HTTP "error" status codes do not
   cause errors; only failed or aborted network requests do. For more, see the
   ["Using Fetch" MDN guide](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful).
-* `response`: An instance of [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response). The
+- `response`: An instance of [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response). The
   [`body`](https://developer.mozilla.org/en-US/docs/Web/API/Body) will already be read, and made
   available to you as `response.data`.
-* `data`: The data returned in `response`. This will be different from `response.data` if a
+- `data`: The data returned in `response`. This will be different from `response.data` if a
   `transformData` prop was passed to `<Fetch/>`.
-* `doFetch`: A function that makes the HTTP request. See notes below.
-* `url`: The URL that was passed into `<Fetch />`.
-* `requestName`: The name of the request (see `requestName` below)
-* `requestKey`: The computed [request key](./docs/guides/request-keys.md)
+- `doFetch`: A function that makes the HTTP request. See notes below.
+- `url`: The URL that was passed into `<Fetch />`.
+- `requestName`: The name of the request (see `requestName` below)
+- `requestKey`: The computed [request key](./docs/guides/request-keys.md)
 
 There are three common use cases for the `doFetch` prop:
 
-* You can use it to "refresh" the data by making a follow-up request for read requests
-* You can use it to retry the request if there is any sort of error
-* You must manually call this method to actually make the request anytime that the `lazy` prop
+- You can use it to "refresh" the data by making a follow-up request for read requests
+- You can use it to retry the request if there is any sort of error
+- You must manually call this method to actually make the request anytime that the `lazy` prop
   is passed as `true`.
 
 `doFetch` accepts one argument: `options`. Any of the `fetch()` options, such as `url`, `method`, and
 `body` are valid `options`. You may also specify a new `requestKey` if you are manually generating your
 own keys. This method allows you to customize the request from within the component based on the
 component's state.
 
+`doFetch` returns a Promise that **always** resolves. It resolves to the same argument that the
+[`afterFetch`](#afterFetch) prop receives.
+
 ##### `lazy`
 
 Whether or not the request will be called when the component mounts. The default value
@@ -252,10 +255,10 @@ is based on the request method that you use.
 A function that is called just before a network request is initiated. It is called
 with one argument, an object with the following keys:
 
-* `url`: The URL of the request
-* `init`: The second argument passed to `global.fetch()`, which specifies things
+- `url`: The URL of the request
+- `init`: The second argument passed to `global.fetch()`, which specifies things
   such as the body, method, and so on
-* `requestKey`: Either the computed request key, or the value of the
+- `requestKey`: Either the computed request key, or the value of the
   `requestKey` prop
 
 This feature is useful for analytics, or syncing response data with a data store such
@@ -268,16 +271,16 @@ as [Redux](https://github.com/reactjs/redux/).
 A function that is called anytime that a network response is received. It is called
 with one argument, an object with the following keys:
 
-* `url`: The URL of the request
-* `init`: The second argument passed to `global.fetch()`, which specifies things
+- `url`: The URL of the request
+- `init`: The second argument passed to `global.fetch()`, which specifies things
   such as the body, method, and so on
-* `requestKey`: Either the computed request key, or the value of the
+- `requestKey`: Either the computed request key, or the value of the
   `requestKey` prop
-* `response`: The response that was received from the HTTP request
-* `data`: The transformed data from the response. This will be different from
+- `response`: The response that was received from the HTTP request
+- `data`: The transformed data from the response. This will be different from
   `response.data` if a `transformData` function was passed as a prop to `<Fetch/>`.
-* `error`: An error returned from the HTTP request
-* `didUnmount`: A Boolean representing whether or not the component has unmounted
+- `error`: An error returned from the HTTP request
+- `didUnmount`: A Boolean representing whether or not the component has unmounted
 
 This can be used for analytics or syncing response data with a data store such
 as [Redux](https://github.com/reactjs/redux/).
@@ -351,7 +354,7 @@ about the response, such as its status code.
   responseType="text"
   transformData={countryName => {
     return {
-      countryName
+      countryName,
     };
   }}>
   {({ data }) => {
@@ -383,10 +386,10 @@ everywhere, we tend to give them names to help humans read and debug the code.
 
 This determines how the request interacts with the cache. Valid options are:
 
-* `"cache-first"`
-* `"cache-and-network"`
-* `"network-only"`
-* `"cache-only"`
+- `"cache-first"`
+- `"cache-and-network"`
+- `"network-only"`
+- `"cache-only"`
 
 For documentation on what each of these values do, refer to the [response caching guide](./docs/guides/response-caching.md).
 

examples/updating-a-resource/src/App.js

@@ -10,7 +10,13 @@ class App extends Component {
             <button
               onClick={() =>
                 doFetch({
-                  body: this.getUpdatedPost()
+                  body: this.getUpdatedPost(),
+                }).then(afterFetchInfo => {
+                  // eslint-disable-next-line no-console
+                  console.log(
+                    'The call to doFetch resolved. Received result:',
+                    afterFetchInfo
+                  );
                 })
               }
               disabled={fetching}>
@@ -26,7 +32,7 @@ class App extends Component {
 
   getUpdatedPost() {
     return JSON.stringify({
-      title: 'hello'
+      title: 'hello',
     });
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-request",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Declarative HTTP requests with React.",
   "main": "lib/index.js",
   "module": "es/index.js",