Pass the requestKey down

Author: jamesplease

README.md

@@ -202,6 +202,7 @@ It is called with one argument, `result`, an object with the following keys:
 * `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:
 
@@ -224,9 +225,7 @@ is based on the request method that you use.
 | POST, PUT, PATCH, DELETE | `true`        |
 
 ```jsx
-<Fetch
-  url="/books"
-  lazy>
+<Fetch url="/books" lazy>
   {({ doFetch }) => {
     <button onClick={() => doFetch()}>Fetch books</button>;
   }}

src/fetch.js

@@ -14,7 +14,7 @@ export function clearResponseCache() {
 export class Fetch extends React.Component {
   render() {
     const { children, requestName, url } = this.props;
-    const { fetching, response, data, error } = this.state;
+    const { fetching, response, data, error, requestKey } = this.state;
 
     if (!children) {
       return null;
@@ -26,6 +26,7 @@ export class Fetch extends React.Component {
           fetching,
           response,
           data,
+          requestKey,
           error,
           doFetch: this.fetchRenderProp
         }) || null
@@ -37,6 +38,10 @@ export class Fetch extends React.Component {
     super(props, context);
 
     this.state = {
+      requestKey: getRequestKey({
+        ...props,
+        method: props.method.toUpperCase()
+      }),
       requestName: props.requestName,
       fetching: false,
       response: null,
@@ -145,6 +150,7 @@ export class Fetch extends React.Component {
       signal
     } = Object.assign({}, this.props, options);
 
+    // We need to compute a new key, just in case a new value was passed in `doFetch`.
     const requestKey = getRequestKey({
       url,
       method: method.toUpperCase(),
@@ -210,7 +216,10 @@ export class Fetch extends React.Component {
       signal
     };
 
-    this.setState({ fetching: true });
+    this.setState({
+      fetching: true,
+      requestKey
+    });
     const hittingNetwork = !isRequestInFlight(requestKey) || !dedupe;
 
     if (hittingNetwork) {

test/index.test.js

@@ -50,12 +50,23 @@ describe('rendering', () => {
   test('passes the right object shape to the render function', () => {
     const mockRender = jest.fn().mockReturnValue(null);
     const wrapper = shallow(
-      <Fetch url="/test" requestName="tester" children={mockRender} lazy={true} />
+      <Fetch
+        url="/test"
+        requestName="tester"
+        children={mockRender}
+        lazy={true}
+      />
     );
+    const requestKey = getRequestKey({
+      url: '/test',
+      method: 'GET',
+      responseType: 'json'
+    });
     expect(mockRender).toHaveBeenCalledTimes(1);
     expect(mockRender).toBeCalledWith(
       expect.objectContaining({
         requestName: 'tester',
+        requestKey,
         url: '/test',
         fetching: false,
         response: null,