with-data-fetcher is a container for React components, which automates getting data from an API when the composed component's props change.

How many times have you written fetching logic in order to populate the props in a React component? Way to many times.

This container gets you up and running with

• data fetching that happens on componentDidMount or
• data fetching when specific props change,
• an optional initial state for your React component and
• an optional loading screen component, which shows before the fetched data arrives.
• works with Typescript, React 16.8 >
• a function prop, getData is provided to the wrapped child component, which is used to fetch data at adhoc times

withDataGetter

• param fetcher - (outerProps) => Promise - required function that takes the props passed to the composed child React component and returns a promise with the fetched data.
• param defaultState - (outerProps) => defaultResultData - optional function that returns the default version of the result data. If not provided, the container will return the loading component until the result data has been fetched.
• param whenChanges - (outerProps) => any[] - optional function that returns an array of dependencies, any of which change, will trigger the data to be fetched again.
• returns anonymous function
• • param ChildComponent required component to wrap
• • param LoadingScreen optional loading component to show when no data available

import * as React from 'react';
import withDataFetcher from 'with-data-fetcher';

const DataRenderer = ({ otherData, data, getData }: ChildProps) => {
    return (
        <>
          <h1>
            {otherData}
          </h1>
          <button onClick={() => getData({ whichData: 1 })}>
            get second set of data
          </button>
          <div>
            {data.map((d: string) => (
              <div>
                {d}
              </div>
            ))}
          </div>
        </>
    );
};

const dataStore = [
  ['a', 'b', 'c'],
  ['1', '2', '3',
];

type OuterProps = { whichData: number };
type FetchResult = { data: string[] };
type ChildProps = FetchResult & { otherData: string; getData: (args?: OuterProps) => void }:

const ComposedComponent = withDataFetcher<OuterProps, ChildProps, FetchResult>(
    async ({ whichData }) => ({ data: dataStore[whichData] }),
)(DataRenderer);

ReactDOM.render(<ComposedComponent whichData={0} otherData="otherpieceofdata" />, document.body);