Module Common/Promise

The promiseHash function is not directly related to Remix but it's a useful function when working with loaders and actions.

This function is an object version of Promise.all which lets you pass an object with promises and get an object with the same keys with the resolved values.

import { promiseHash } from "remix-utils/promise";

export async function loader({ request }: Route.LoaderArgs) {
	return json(
		await promiseHash({
			user: getUser(request),
			posts: getPosts(request),
		}),
	);
}
Copy

You can use nested promiseHash to get a nested object with resolved values.

import { promiseHash } from "remix-utils/promise";

export async function loader({ request }: Route.LoaderArgs) {
	return json(
		await promiseHash({
			user: getUser(request),
			posts: promiseHash({
				list: getPosts(request),
				comments: promiseHash({
					list: getComments(request),
					likes: getLikes(request),
				}),
			}),
		}),
	);
}
Copy

The timeout function lets you attach a timeout to any promise, if the promise doesn't resolve or reject before the timeout, it will reject with a TimeoutError.

import { timeout } from "remix-utils/promise";

try {
	let result = await timeout(fetch("https://example.com"), { ms: 100 });
} catch (error) {
	if (error instanceof TimeoutError) {
		// Handle timeout
	}
}
Copy

Here the fetch needs to happen in less than 100ms, otherwise it will throw a TimeoutError.

If the promise is cancellable with an AbortSignal you can pass the AbortController to the timeout function.

import { timeout } from "remix-utils/promise";

try {
	let controller = new AbortController();
	let result = await timeout(fetch("https://example.com", { signal: controller.signal }), {
		ms: 100,
		controller,
	});
} catch (error) {
	if (error instanceof TimeoutError) {
		// Handle timeout
	}
}
Copy

Here after 100ms, timeout will call controller.abort() which will mark the controller.signal as aborted.