Single Fetch: missing type for useLoaderData<typeof clientLoader>()

[rphlmr]

Reproduction

https://stackblitz.com/edit/remix-run-remix-43pane?file=app%2Froutes%2F_index.tsx

• hover clientLoaderData

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @remix-run/dev: * => 2.9.1 
    @remix-run/node: * => 2.9.1 
    @remix-run/react: * => 2.9.1 
    @remix-run/serve: * => 2.9.1 
    vite: ^5.1.0 => 5.2.10

Used Package Manager

npm

Expected Behavior

useLoaderData<typeof clientLoader>(); should be typed.

Actual Behavior

useLoaderData<typeof clientLoader>(); is of type never

[rphlmr]

The reason is single-fetch.d.ts.

  export function useLoaderData<T>(): T extends LoaderFunction_SingleFetch
    ? SingleFetchSerialize_V2<T>
    : never;

  export function useActionData<T>(): T extends ActionFunction_SingleFetch
    ? SingleFetchSerialize_V2<T>
    : never;

  type LoaderFunction_SingleFetch = (
    args: LoaderFunctionArgs
  ) => Promise<DataFunctionReturnValue> | DataFunctionReturnValue;

  type ActionFunction_SingleFetch = (
    args: ActionFunctionArgs
  ) => Promise<DataFunctionReturnValue> | DataFunctionReturnValue;

Extends for the generics of useLoaderData and useActionData don't match with args of clientLoader (ClientLoaderFunctionArgs)

[rphlmr]

Possible fix:
Add a ClientLoaderFunctionArgs_SingleFetch to use instead of ClientLoaderFunctionArgs?

type ClientLoaderFunctionArgs_SingleFetch = Omit<
  ClientLoaderFunctionArgs,
  "serverLoader"
> & {
  serverLoader: <T = AppData>() => ReturnType<T>;
};

type ClientLoaderFunction_SingleFetch = ((
  args: ClientLoaderFunctionArgs_SingleFetch,
) => ReturnType<LoaderFunction_SingleFetch>) & {
  hydrate?: boolean;
};

type ClientActionFunctionArgs_SingleFetch = Omit<
  ClientActionFunctionArgs,
  "serverLoader"
> & {
  serverLoader: <T = AppData>() => ReturnType<T>;
};

type ClientActionFunction_SingleFetch = (
  args: ActionLoaderFunctionArgs_SingleFetch,
) => ReturnType<ActionFunction_SingleFetch>;

Then, add it on hooks

type SingleFetchSerialize_V2<T extends LoaderFunction_SingleFetch | ActionFunction_SingleFetch | ClientLoaderFunction_SingleFetch | ClientActionFunction_SingleFetch> =
    Awaited<ReturnType<T>> extends TypedDeferredData<infer D> ? D :
        Awaited<ReturnType<T>> extends TypedResponse<Record<string, unknown>> ? SerializeFrom<T> :
            Awaited<ReturnType<T>>;

declare module "@remix-run/react" {
  export function useLoaderData<T>(): T extends
    | LoaderFunction_SingleFetch
    | ClientLoaderFunction_SingleFetch
    ? SingleFetchSerialize_V2<T>
    : never;

  export function useActionData<T>(): T extends
    | ActionFunction_SingleFetch
    | ClientActionFunction_SingleFetch
    ? SingleFetchSerialize_V2<T>
    : never;

  export function useRouteLoaderData<T>(
    routeId: string,
  ): T extends LoaderFunction_SingleFetch | ClientLoaderFunction_SingleFetch
    ? SingleFetchSerialize_V2<T>
    : never;

  export function useFetcher<TData = unknown>(
    opts?: Parameters<typeof useFetcherRR>[0],
  ): FetcherWithComponents<
    TData extends
      | LoaderFunction_SingleFetch
      | ActionFunction_SingleFetch
      | ClientLoaderFunction_SingleFetch
      | ClientActionFunction_SingleFetch
      ? SingleFetchSerialize_V2<TData>
      : never
  >;
}

[kiliman]

Yeah, there will always be some friction when adding future API without breaking the existing types. At least TypeScript has a way to override these type definitions.

In addition, I think Remix needs to add ones for the updated LoaderFunctionArgs and ActionFunctionArgs so that response is not optional (since it isn't when single fetch is enabled).

#9326

[brophdawg11]

This should be resolved by the introduction of defineLoader/defineAction in #9372. We'll have a prerelease out soon for validation.

[brophdawg11]

This fix is available in 2.9.2-pre.1 if you'd like to give it a shot and see if it resolves your issue! Here's the draft release notes: https://github.com/remix-run/remix/blob/release-next/CHANGELOG.md#v292

[brophdawg11]

2.9.2 is released - https://github.com/remix-run/remix/releases/tag/remix%402.9.2