[Feature]: Component to resolve multiple promise results from deferred loaders as they come #6149

freshollie · 2023-04-24T15:14:08Z

freshollie
Apr 24, 2023

Problem

The <Suspense><Await>... pattern provides a really nice interface for rendering both the positive and fallback result for a single promise result from a data-loader. However, the pattern does not scale when you wish to use the results from different deferred data results in a single component.#6133

Example

Given a loader similar to this

const loader = () => {
  return defer({
    name: new Promise(....), // loads in 0.5s
    description: new Promise (...), // loads in 1s
  });
};

And some component which can display the data as it comes, with some fallback in place when data loading

// Inputs optional
const SomeContentComponent = ({ name, description} ) => {...};

The only real way to use this component, where the data is shown as it comes, is to make a really messy suspense/await tree 🤢:

export default () => {
  const data = useLoader();
  return (
    <Suspense
      fallback={
        <Suspense fallback={<SomeContentComponent />}>
          <Await resolve={data.description}>
            {(description) => (
              <SomeContentComponent description={description} />
            )}
          </Await>
        </Suspense>
      }
    >
      <Await resolve={data.name}>
        {(name) => (
          <Suspense fallback={<SomeContentComponent name={name} />}>
            <Await resolve={data.description}>
              {(description) => (
                <SomeContentComponent name={name} description={description} />
              )}
            </Await>
          </Suspense>
        )}
      </Await>
    </Suspense>
  );
};

In this example, the 3rd order version of this (where there are 3 promises) doesn't scale at all and would be completely unmaintainable.

Solution

I propose here a new component (could be named whatever, but I've gone for MergeAwaits) which takes multiple promises and outputs the result of each of them when they resolve.

Sourcecode

import { Await, useLocation } from "@remix-run/react";
import { Suspense, useEffect, useRef, useState } from "react";

type OptionalAwaitedAll<T extends [...any[]]> = T extends [
  infer Head,
  ...infer Tail
]
  ? [Awaited<Head> | undefined, ...OptionalAwaitedAll<Tail>]
  : [];

type MergeAwaitsProps<R extends [...any[]]> = {
  children: (value: OptionalAwaitedAll<R>) => React.ReactNode;
  resolve: readonly [...R];
};

/**
 * A complex component which allows an array of multiple promises to be given
 * and will rerender the given child function when each of the promises
 * independently resolves
 */
export const MergeAwaits = <R extends [...any[]]>(
  props: MergeAwaitsProps<R>
): JSX.Element => {
  const countRef = useRef(0);
  const location = useLocation();
  const [resolved, setResolved] = useState(
    () =>
      props.resolve.map((r) =>
        Promise.resolve(r) === r ? undefined : r
      ) as OptionalAwaitedAll<R>
  );

  if (props.resolve.length !== resolved.length) {
    throw new Error("The resolve prop should be a fixed length tuple");
  }

  useEffect(() => {
    if (props.resolve.length > 1) {
      setResolved(
        props.resolve.map((r) =>
          Promise.resolve(r) === r ? undefined : r
        ) as OptionalAwaitedAll<R>
      );
    }
    // We don't want props.resolve to be used as trigger here, only the pathname
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location.pathname]);

  useEffect(() => {
    if (props.resolve.length > 1) {
      // Resolve the promises if they are promises
      if (props.resolve.some((r) => Promise.resolve(r) === r)) {
        const count = ++countRef.current;
        props.resolve.forEach((p, i) => {
          Promise.resolve(p).then((r) => {
            // Ensure that only the latest resolve is used
            if (count === countRef.current) {
              setResolved((current) => {
                const newResolved = [...current];
                newResolved[i] = r;
                return newResolved as OptionalAwaitedAll<R>;
              });
            }
          });
        });
      } else {
        // Otherwise the input is not promises so the resolved data
        // to the inputs
        setResolved(props.resolve as unknown as OptionalAwaitedAll<R>);
      }
    }
    // This is correct as we want to only rerun this if any of the resolve values update
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [...props.resolve]);

  // Use suspense if only 1 thing to resolve
  if ((props.resolve.length as number) === 1) {
    return (
      <Suspense fallback={props.children([undefined] as OptionalAwaitedAll<R>)}>
        <Await resolve={props.resolve[0]}>
          {(r) => props.children([r] as OptionalAwaitedAll<R>)}
        </Await>
      </Suspense>
    );
  }

  return props.children(resolved) as JSX.Element;
};

Usage

Given the same loader and component above, here is the same usage with MergeAwaits

export default () => {
  const data = useLoader();
  return (
    <MergeAwaits resolve={[data.name, data.description]}>
      {([name, description]) => (
        <SomeContentComponent name={name} description={description} />
      )}
    </MergeAwaits>
  );
};

Questions

Is this a behaviour Remix is willing to support? There may be a better way to write MergeAwaits the source I have provided is what we have used in our project (which doesn't rely on the SSR loses of using state for the promises)
Is there already a feature of Suspense and Await which I am missing which provides the functionality I am looking for?

kiliman · 2023-04-24T15:47:13Z

kiliman
Apr 24, 2023
Maintainer

I think somebody else has made a similar proposal. I don't have the link at the moment.

Anyway, one of the nice things about Remix is that the core library provides the building blocks you can use to build your solution. For example, remix-utils by @sergiodxa has a number of custom components/hooks that you can use. I'm pretty sure the Remix team does not want to increase the API surface area more than necessary.

1 reply

freshollie Apr 24, 2023
Author

Nice, if you can find a link that would be great! I tried to google and search the discussions but the problem is hard to describe. I guess the reason I proposed this to remix instead of remix-utils is I wasn't sure if Remix would have some internals which would make this easier to develop a component for, the solution I have atm doesn't utilise the Suspense mechanism fully.

rikbrown · 2024-01-07T06:13:10Z

rikbrown
Jan 7, 2024

Stumbled upon this looking for a simpler "wait for all of the promises before rendering the block"... which, if anyone else wanted that, is as simple as:

<Await resolve={Promise.all([products, collections])}>
                    {([products, collections]) => {

3 replies

npeham Jan 30, 2024

@rikbrown Nice idea! Sadly after I tried this out and submitted an action which updates for example the products the UI wasnt updated. I removed the Promise.all and then it worked again.

So this solution works as long you dont fire an action which updates the data in your Promise.all keep that in mind.

npeham Jan 30, 2024

@rikbrown I just found out that when you put your Promise.all in your loader and then return it then everything works without endless nesting your <Suspense> and <Await>! Example:

export async function loader({ params, request }: LoaderArgs) {
 // fetch data1 and data2 from your database, api, etc ...

  const data = Promise.all([data1, data2]);

  return defer({ data });
}

And then in the frontend:

const {
    data,
  } = useLoaderData<typeof loader>();

...

 <Suspense fallback={<span>loading</span>}>
        <Await resolve={data}>
          {([data1, data2]) => {
          ...

And everything is fully typed ❤️

@freshollie Might be interesting for you as well!

freshollie Jan 30, 2024
Author

@npeham if you wrap everything in a Promise.all you don't get to display the data for each promise as it completes. The example component I provided does so.

If one promise takes 1 minute to load, but another only 10 seconds, the user would still have to wait for the 1 minute piece of data to load before being visible.

joakimsq · 2024-10-22T07:04:16Z

joakimsq
Oct 22, 2024

That's very nice @freshollie tyvm 💯

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature]: Component to resolve multiple promise results from deferred loaders as they come #6149

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 4 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

[Feature]: Component to resolve multiple promise results from deferred loaders as they come #6149

freshollie Apr 24, 2023

Problem

Example

Solution

Sourcecode

Usage

Questions

Replies: 3 comments · 4 replies

kiliman Apr 24, 2023 Maintainer

freshollie Apr 24, 2023 Author

rikbrown Jan 7, 2024

npeham Jan 30, 2024

npeham Jan 30, 2024

freshollie Jan 30, 2024 Author

joakimsq Oct 22, 2024

freshollie
Apr 24, 2023

Replies: 3 comments 4 replies

kiliman
Apr 24, 2023
Maintainer

freshollie Apr 24, 2023
Author

rikbrown
Jan 7, 2024

freshollie Jan 30, 2024
Author

joakimsq
Oct 22, 2024