useLoadable: similar to useAwaited but returns state & data/error instead of suspending

[phuctm97]

Sometimes you want to use a deferred promise from loaders but want to hook the state of the deferred promise into the same component tree (maintaining state of the below component tree) instead of rendering a different fallback tree.

export const Route = createFileRoute("/")({
  loader: () => ({ somePromise: slowFunction() }),
  component: () => {
    const { somePromise }  = Route.useLoaderData();
    const { data, error, isLoading } = useLoadable(somePromise);
  }
});

[schiller-manuel]

how would that look like?

[phuctm97]

Just updated the post with an example.

[AhmedBaset]

const { data, error, isLoading } = useQuery({ queryFn: somePromise, queryKey: ... });