Combining Stores

A core pattern in use-remote-data 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 Failed if any store fails. A single "retry" will only re-fetch the failing requests.
Returns Pending if any constituent store is Pending.
Returns Success with a tuple of all combined values if all succeed.
Manages stale states if any store becomes stale.

In a render prop, you can destructure the results.

import { RemoteDataStore, useRemoteData, Await } from 'use-remote-data';

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

export function Component() {
    const computeOne = useRemoteData(() => produce(1, 1000));
    const computeString = useRemoteData(() => produce('Hello', 1000));

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

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

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