Combining Stores

One of the library’s most powerful patterns is combining multiple requests. If you have two or more RemoteDataStores, you can merge them into a single store that represents all requests in flight. This is done via RemoteDataStore.all(...):

Under the hood, the combined store uses the RemoteData.all(...) function, which:

Returns No if any store fails. A single “retry” will only re-fetch the failing requests.
Returns Pending if any constituent store is Pending.
Returns Yes with a tuple of all combined values if all succeed.
Manages invalidation states if any store becomes invalidated.

In a render prop, you can destructure the results.

import * as React from 'react';
import {
    RemoteDataStore,
    useRemoteData,
    WithRemoteData,
} from 'use-remote-data';

function produce<T>(value: T, delay: number = 1000): Promise<T> {
    return new Promise((resolve) => setTimeout(() => resolve(value), delay));
}

export const Component: React.FC = () => {
    const computeOne = useRemoteData(() => produce(1));
    const computeString = useRemoteData(() => produce('Hello'));

    const combinedStore = RemoteDataStore.all(computeOne, computeString);

    return (
        <WithRemoteData store={combinedStore}>
            {([num, string]) => (
                <span>
                    {num} and {string}
                </span>
            )}
        </WithRemoteData>
    );
};

Run snippet

A Note on TypeScript Tooling

The TypeScript compiler (and IDEs) fully understands these combined stores. You can hover over the tuple items (often with Ctrl or Command) to see precise type information.

A Note on TypeScript Tooling​

A Note on TypeScript Tooling