Exporting deferred types in React Router

[johnpangalos]

Hey!

I had an issue with deferred types, mostly that it is hard to type. I was wondering the Deferred Data Class could have an associated interface which the class implements then the type is exported?

I usually use pretty strict typing and though this works I'd prefer a way to better type this:

export function Component() {
  const data = useLoaderData() as { res: unknown };
  return <Suspense fallback={<>Loading...</>}>
    <Await resolve={data.res}>
      {(data: MyResponseType) => (
        <>
          { /* ... */ }
        </>
      )}
    </Await>

  </Suspense>
}

I'd like something like this but with better names :)

interface IDeferredData<T> {
  data: Record<string, T>;
}

class DeferredData<T> implements IDeferredData<T> {
  data: Record<string, T>;
  constructor(data: Record<string, T>) {
    this.data = data;
  }
}

export function Component() {
  const data = useLoaderData() as IDeferredData<{ res: MyResponseType }>;
  return <Suspense fallback={<>Loading...</>}>
    <Await resolve={data.res}>
      {(data) => (
        <>
          { /* ... */ }
        </>
      )}
    </Await>

  </Suspense>
}

Would this be something this project would be interested in? I would be willing to put some time into getting this working.

[johnpangalos]

Having a generic on useLoaderData like in Remix would also be a good solution.

https://github.com/remix-run/remix/blob/fd86f87d07e3e3916c9b54b8323286b57a93935a/packages/remix-react/components.tsx#L1002