• Stars
    star
    202
  • Rank 193,691 (Top 4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 3 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Like Promise.all(array) but with an object instead of an array.

Combine-Promises

NPM CI Size min Size minzip

Like Promise.all([]) but for objects.

import combinePromises from 'combine-promises';

const { user, company } = await combinePromises({
  user: fetchUser(),
  company: fetchCompany(),
});

Why:

  • Insensitive to destructuring order
  • Simpler async functional code

Features:

  • TypeScript support
  • Lightweight
  • Feature complete
  • Well-tested
  • ESM / CJS

Sponsor

ThisWeekInReact.com: the best newsletter to stay up-to-date with the React ecosystem:

ThisWeekInReact.com banner


Install

npm install combine-promises
// OR
yarn add combine-promises

TypeScript support

Good, native and strict TypeScript support:

  • Return type correctly inferred from the input object
  • All object values should be async
  • Only accept objects (reject arrays, null, undefined...)
const result: { user: User; company: Company } = await combinePromises({
  user: fetchUser(),
  company: fetchCompany(),
});

Insensitive to destructuring order

A common error with Promise.all is to have a typo in the destructuring order.

// Bad: destructuring order reversed
const [company, user] = await Promise.all([fetchUser(), fetchCompany()]);

This becomes more dangerous as size of the promises array grows.

With combinePromises, you are using explicit names instead of array indices, which makes the code more robust and not sensitive to destructuring order:

// Good: we don't care about the order anymore
const { company, user } = await combinePromises({
  user: fetchUser(),
  company: fetchCompany(),
});

Simpler async functional code

Suppose you have an object representing a friendship like {user1: "userId-1", user2: "userId-2"}, and you want to transform it to {user1: User, user2: User}.

You can easily do that:

import combinePromises from 'combine-promises';
import { mapValues } from 'lodash'; // can be replaced by vanilla ES if you prefer

const friendsIds = { user1: 'userId-1', user2: 'userId-2' };

const friends = await combinePromises(mapValues(friendsIds, fetchUserById));

Without this library: good luck to keep your code simple.

Inspirations

Name inspired by combineReducers from Redux.

More Repositories

1

react-async-hook

React hook to handle any async operation in React components, and prevent race conditions
TypeScript
1,140
star
2

react-native-scroll-into-view

Scroll a ReactNative View into the visible screen. Similar to DOMElement.scrollIntoView() browser function.
TypeScript
409
star
3

awesome-debounce-promise

Debounce your API calls easily and stay in promised land.
TypeScript
376
star
4

scalable-frontend-with-elm-or-redux

An attempt to make Redux and Elm applications scale
JavaScript
363
star
5

trailing-slash-guide

Understand and fix your static website trailing slash issues!
HTML
307
star
6

gatsby-plugin-react-native-web

react-native-web plugin for Gatsby
JavaScript
277
star
7

react-native-animation-hooks

A simple declarative API for React-Native animations, using hooks
TypeScript
243
star
8

rereduce

Reducer library for Redux
JavaScript
166
star
9

ajax-interceptor

This permits to wire interceptors on XHR requests and responses
JavaScript
122
star
10

react-reboot

The easiest way to refresh your React components with up-to-date syntax.
JavaScript
62
star
11

react-nested-loader

The easiest way to manage loaders/errors inside a button. NOT an UI lib.
JavaScript
62
star
12

sebastienlorber.com

My personal website
JavaScript
58
star
13

gcm-server-repository

maven repository for gcm-server for Android push notifications
Shell
46
star
14

react-native-alert-async

An Alert.alert that you can await
JavaScript
45
star
15

awesome-imperative-promise

Offer an imperative API on top of promise, with cancellation support
TypeScript
41
star
16

micro-typed-events

The smallest, most convenient typesafe TS event emitter you'll ever need
TypeScript
40
star
17

todomvc-onboarding

Showcase different ways to add a complex onboarding to a TodoMVC app
36
star
18

use-async-setState

Permits to await setState()
TypeScript
35
star
19

expo-typescript

TypeScript
33
star
20

redux-dispatch-subscribe

store enhancer for redux which allows to listen for dispatched actions
JavaScript
29
star
21

react-three-fiber-journey

Three.js Journey implemented with React-Three-Fiber
TypeScript
27
star
22

awesome-only-resolves-last-promise

Wraps an async function, and ensures that only last call will ever resolve/reject
TypeScript
26
star
23

docusaurus-crowdin-example

JavaScript
11
star
24

backspace-disabler

Disable the annoying browser backward navigation when the user press the backspace key
JavaScript
11
star
25

react-native-storage-slot

A simple typed wrapper around AsyncStorage
TypeScript
10
star
26

slorber

8
star
27

awesome-icu

Reference everything you find interesting about ICU translations
7
star
28

this-week-in-react

ThisWeekInReact.com
MDX
6
star
29

slo.im

slo.im shortcuts
4
star
30

react-updatable-context

React context which inject a value setter/updater in the Consumer
JavaScript
3
star
31

slorber-website

My website
JavaScript
2
star
32

test-docu

JavaScript
2
star
33

expo-ci

JavaScript
2
star
34

traced-svg-parameter-chooser

JavaScript
2
star
35

docusaurus-visual-tests

TypeScript
2
star
36

docusaurus-starter

JavaScript
1
star
37

bug-expokit-crashlytics

bug-expokit-crashlytics
JavaScript
1
star
38

slorber-api-screenshot

JavaScript
1
star
39

docusaurus-dsfr

TypeScript
1
star