From @SimonHoiberg's tweet: https://twitter.com/simonhoiberg/status/1467065196963405824

combine-provider.tsx

import type { FunctionComponent } from "react";

export const combineProviders = (providers: FunctionComponent[]) => providers.reduce(
	(Combined, Provider) => ({ children }) => (
		<Combined>
			<Provider>{children}</Provider>
		</Combined>
	),
);

usage.tsx

import { BrowserRouter } from "react-router-dom";
import { RecoilRoot } from "recoil";
import { ApolloProvider } from "@apollo/client";

import { combineProviders } from "./combine-provider";

const Providers = combineProviders([
	BrowserRouter,
	RecoilRoot,
	ApolloProvider,
]);

function Root() {
	return (
		<Providers>
			<App />
		</Providers>
	);
}