Use new React.createContext to expose state in deep trees. Cleanup and improve children handling after requiring React 16.3. Remove chaining children functions (middleware) - better served via context and other hooks (fetchFunction).

Author: techniq

package.json

@@ -17,13 +17,13 @@
     "babel-preset-env": "^1.6.1",
     "fetch-mock": "^6.3.0",
     "jest": "^22.4.3",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.2.0",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react-test-renderer": "^16.3.2",
     "react-testing-library": "^2.3.0"
   },
   "peerDependencies": {
-    "react": ">=15.4.2"
+    "react": "^16.3.0"
   },
   "scripts": {
     "test": "jest",

src/Fetch.js

@@ -3,12 +3,16 @@ import React, { Component } from 'react';
 import { parseBody, renderChildren } from './utils';
 import SimpleCache from './SimpleCache';
 
+const FetchContext = React.createContext({});
+
 export default class Fetch extends Component {
   static defaultProps = {
     as: 'auto',
     fetchFunction: (url, options) => fetch(url, options)
   };
 
+  static Consumer = FetchContext.Consumer;
+
   state = {
     request: {
       url: this.props.url,
@@ -29,7 +33,9 @@ export default class Fetch extends Component {
     this.cache =
       this.props.cache === true
         ? new SimpleCache()
-        : typeof this.props.cache === 'object' ? this.props.cache : null;
+        : typeof this.props.cache === 'object'
+          ? this.props.cache
+          : null;
   }
 
   componentDidMount() {
@@ -90,7 +96,9 @@ export default class Fetch extends Component {
               ? as(response)
               : typeof as === 'object'
                 ? parseBody(response, as)
-                : as === 'auto' ? parseBody(response) : response[as]();
+                : as === 'auto'
+                  ? parseBody(response)
+                  : response[as]();
 
           return dataPromise
             .then(data => ({ response, data }))
@@ -186,6 +194,15 @@ export default class Fetch extends Component {
 
   render() {
     const { children } = this.props;
-    return renderChildren(children, this.state);
+
+    return (
+      <FetchContext.Provider value={this.state}>
+        {typeof children === 'function' ? (
+          <FetchContext.Consumer>{children}</FetchContext.Consumer>
+        ) : (
+          children
+        )}
+      </FetchContext.Provider>
+    );
   }
 }

src/Fetch.test.js

@@ -2172,103 +2172,18 @@ describe('onDataChange', () => {
   });
 });
 
-describe('middleware', () => {
-  it('supports interceptor / middlware', async () => {
-    const url = 'http://localhost';
-    const data = { hello: 'world' };
-    fetchMock.once(url, data);
-
-    // const mockInterceptor = jest.fn();
-    // mockChildren.mockReturnValue(<div />)
-
-    const mockChildren = jest.fn();
-    mockChildren.mockReturnValue(<div />);
-
-    const middleware = fetchProps => mockChildren;
-
-    const {} = render(<Fetch url={url}>{middleware}</Fetch>);
-
-    // Once for initial, once for loading, and once for response
-    await wait(() => expect(mockChildren.mock.calls.length).toBe(3));
-
-    // Initial state
-    expect(mockChildren.mock.calls[0][0]).toMatchObject({
-      loading: null,
-      request: {}
-    });
-
-    // Loading...
-    expect(mockChildren.mock.calls[1][0]).toMatchObject({
-      loading: true,
-      request: {}
-    });
-
-    // Data loaded
-    expect(mockChildren.mock.calls[2][0]).toMatchObject({
-      loading: false,
-      data,
-      request: {},
-      response: {}
-    });
-
-    expect(fetchMock.called(url)).toBe(true);
-  });
-});
-
-describe('middleware', () => {
-  it('supports interceptor / middlware', async () => {
-    const url = 'http://localhost';
-    const data = { hello: 'world' };
-    fetchMock.once(url, data);
-
-    // const mockInterceptor = jest.fn();
-    // mockChildren.mockReturnValue(<div />)
-
-    const mockChildren = jest.fn();
-    mockChildren.mockReturnValue(<div />);
-
-    const middleware = fetchProps => mockChildren;
-
-    const {} = render(<Fetch url={url}>{middleware}</Fetch>);
-
-    // Once for initial, once for loading, and once for response
-    await wait(() => expect(mockChildren.mock.calls.length).toBe(3));
-
-    // Initial state
-    expect(mockChildren.mock.calls[0][0]).toMatchObject({
-      loading: null,
-      request: {}
-    });
-
-    // Loading...
-    expect(mockChildren.mock.calls[1][0]).toMatchObject({
-      loading: true,
-      request: {}
-    });
-
-    // Data loaded
-    expect(mockChildren.mock.calls[2][0]).toMatchObject({
-      loading: false,
-      data,
-      request: {},
-      response: {}
-    });
-
-    expect(fetchMock.called(url)).toBe(true);
-  });
-  // TODO: Add test for conditional returning based on request.status (ex. 401 returns login, 200 returns `children`)
-
-  it('supports multiple interceptors / middlwares', async () => {
+describe('context', () => {
+  it('deeply nested consumer', async () => {
     const url = 'http://localhost';
     const data = { hello: 'world' };
     fetchMock.once(url, data);
 
     const mockChildren = jest.fn();
     mockChildren.mockReturnValue(<div />);
 
-    const middleware = fetchProps => fetchProps => mockChildren;
+    const Listener = () => <Fetch.Consumer>{mockChildren}</Fetch.Consumer>
 
-    const {} = render(<Fetch url={url}>{middleware}</Fetch>);
+    const {} = render(<Fetch url={url}><div><div><div><Listener /></div></div></div></Fetch>);
 
     // Once for initial, once for loading, and once for response
     await wait(() => expect(mockChildren.mock.calls.length).toBe(3));

src/index.js

@@ -1,3 +1,3 @@
 export { default } from './Fetch';
 export { default as SimpleCache } from './SimpleCache';
-export { renderChildren, parseBody } from './utils';
+export { parseBody } from './utils';

src/utils.js

@@ -1,23 +1,5 @@
 import React from 'react';
 
-export function renderChildren(children, fetchProps) {
-  if (typeof children === 'function') {
-    const childrenResult = children(fetchProps);
-    if (typeof childrenResult === 'function') {
-      return renderChildren(childrenResult, fetchProps);
-    } else {
-      return childrenResult;
-    }
-  } else if (React.Children.count(children) === 0) {
-    return null;
-  } else {
-    // DOM/Component children
-    // TODO: Better to check if children count === 1 and return null otherwise (like react-router)?
-    //       Currently not possible to support multiple children components/elements (until React fiber)
-    return React.Children.only(children);
-  }
-}
-
 export const parseBody = (response, mapping = {}) => {
   const contentType = response.headers.get('Content-Type');
 

yarn.lock

@@ -3411,22 +3411,27 @@ rc@~1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~1.0.4"
 
-react-dom@^16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
+react-dom@^16.3.2:
+  version "16.3.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.2.tgz#cb90f107e09536d683d84ed5d4888e9640e0e4df"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react-test-renderer@^16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211"
+react-is@^16.3.2:
+  version "16.3.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.2.tgz#f4d3d0e2f5fbb6ac46450641eb2e25bf05d36b22"
+
+react-test-renderer@^16.3.2:
+  version "16.3.2"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.3.2.tgz#3d1ed74fda8db42521fdf03328e933312214749a"
   dependencies:
     fbjs "^0.8.16"
     object-assign "^4.1.1"
     prop-types "^15.6.0"
+    react-is "^16.3.2"
 
 react-testing-library@^2.3.0:
   version "2.3.0"
@@ -3435,9 +3440,9 @@ react-testing-library@^2.3.0:
     dom-testing-library "^1.10.0"
     wait-for-expect "^0.5.0"
 
-react@^16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
+react@^16.3.2:
+  version "16.3.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.3.2.tgz#fdc8420398533a1e58872f59091b272ce2f91ea9"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"