Support responseType as a function

Author: jamesplease

README.md

@@ -327,6 +327,10 @@ hook to transform the data before it is passed into `children`.
 The content type of the response body. Defaults to `"json"`, unless the response has a 204 status code,
 in which case it will be `"text"`. Valid values are the methods on [Body](https://developer.mozilla.org/en-US/docs/Web/API/Body).
 
+Alternatively, you may specify a function that returns a string. The function will be called with one
+argument: `response`. This allows you to dynamically specify the response type based on information
+about the response, such as its status code.
+
 ```jsx
 // If you have an endpoint that just returns raw text, you could, for instance, convert it into
 // an object using `responseType` and `transformData`.
@@ -344,6 +348,27 @@ in which case it will be `"text"`. Valid values are the methods on [Body](https:
 </Fetch>
 ```
 
+```jsx
+// Some "enterprisey" endpoints return text stack traces anytime that they error. A function
+// `responseType` can protect you against this.
+<Fetch
+  url="/countries/2"
+  responseType={response => {
+    // Only parse as JSON when the request's code is not an error code, and it is
+    // not 204 No Content.
+    return response.ok && response.status !== 204 ? 'json' : 'text';
+  }}
+  transformData={countryName => {
+    return {
+      countryName
+    };
+  }}>
+  {({ data }) => {
+    <div>{data.countryName}</div>;
+  }}
+</Fetch>
+```
+
 ##### `requestName`
 
 A name to give this request, which can help with debugging purposes. The request name is

package.json

@@ -81,7 +81,7 @@
     "rollup-plugin-uglify": "^2.0.1"
   },
   "dependencies": {
-    "fetch-dedupe": "^2.0.0",
+    "fetch-dedupe": "^2.1.0",
     "prop-types": "^15.6.0"
   }
 }

src/fetch.js

@@ -334,12 +334,9 @@ Fetch.propTypes = {
   onResponse: PropTypes.func,
   beforeFetch: PropTypes.func,
   afterFetch: PropTypes.func,
-  responseType: PropTypes.oneOf([
-    'json',
-    'text',
-    'blob',
-    'arrayBuffer',
-    'formData'
+  responseType: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.oneOf(['json', 'text', 'blob', 'arrayBuffer', 'formData'])
   ]),
   transformResponse: PropTypes.func,
   lazy: PropTypes.bool,

test/index.test.js

@@ -230,6 +230,39 @@ describe('successful requests', () => {
     }, networkTimeout);
   });
 
+  test('it accepts a custom `responseType` as a function, and calls afterFetch with the right arguments', done => {
+    fetchMock.get(
+      '/test/succeeds/secondpls',
+      new Promise(resolve => {
+        resolve(successfulResponse());
+      })
+    );
+
+    expect.assertions(2);
+    const afterFetchMock = jest.fn();
+
+    const wrapper = mount(
+      <Fetch
+        url="/test/succeeds/secondpls"
+        afterFetch={afterFetchMock}
+        responseType={() => 'text'}
+      />
+    );
+
+    setTimeout(() => {
+      expect(afterFetchMock).toHaveBeenCalledTimes(1);
+      expect(afterFetchMock).toBeCalledWith(
+        expect.objectContaining({
+          url: '/test/succeeds/secondpls',
+          error: null,
+          didUnmount: false,
+          data: 'hi'
+        })
+      );
+      done();
+    }, networkTimeout);
+  });
+
   test('`transformData` is used to transform the response data', done => {
     fetchMock.get(
       '/test/succeeds/third',