Merge pull request #5 from ryfylke-react-as/2-types-are-wrong-in-extended-loader-in-certain-situations

fix: Types for extended loaders

Author: imp-dance

src/createLoader.ts

@@ -40,14 +40,14 @@ export const createLoader = <
   A = never
 >(
   createLoaderArgs: Types.CreateLoaderArgs<P, QRU, R, A>
-): Types.Loader<P, R, A> => {
+): Types.Loader<P, R, QRU, A> => {
   const useLoader = createUseLoader({
     queries:
       createLoaderArgs.queries ?? (() => [] as unknown as QRU),
     transform: createLoaderArgs.transform,
   });
 
-  const loader: Types.Loader<P, R, A> = {
+  const loader: Types.Loader<P, R, QRU, A> = {
     useLoader,
     onLoading: createLoaderArgs.onLoading,
     onError: createLoaderArgs.onError,
@@ -69,9 +69,9 @@ export const createLoader = <
       ...loaderArgs
     }: Partial<Types.CreateLoaderArgs<Pb, QRUb, Rb, Ab>>) {
       const extendedLoader = {
-        ...(this as unknown as Types.Loader<Pb, Rb, Ab>),
+        ...(this as unknown as Types.Loader<Pb, Rb, QRUb, Ab>),
         ...loaderArgs,
-      } as Types.Loader<Pb, Rb, Ab>;
+      } as Types.Loader<Pb, Rb, QRUb, Ab>;
 
       if (queries) {
         const newUseLoader = createUseLoader({

src/types.ts

@@ -90,9 +90,9 @@ export type InferLoaderData<T> = T extends Loader<
   any
 >
   ? X
-  : T extends Loader<never, infer Y, any>
+  : T extends Loader<never, infer Y, any, any>
   ? Y
-  : T extends Loader<any, infer Z, never>
+  : T extends Loader<any, infer Z, never, any>
   ? Z
   : never;
 
@@ -162,6 +162,7 @@ export type CreateLoaderArgs<
 export type Loader<
   P extends unknown,
   R extends unknown,
+  QRU extends readonly UseQueryResult<unknown>[],
   A = never
 > = {
   /** A hook that runs all queries and returns aggregated result */
@@ -185,15 +186,17 @@ export type Loader<
   whileFetching?: WhileFetchingArgs<P, R>;
   /** Returns a new `Loader` extended from this `Loader`, with given overrides. */
   extend: <
-    QRUb extends readonly UseQueryResult<unknown>[],
+    QRUb extends readonly UseQueryResult<unknown>[] = QRU,
     Pb extends unknown = P,
-    Rb extends unknown = QRUb extends unknown
-      ? R
+    Rb extends unknown = QRUb extends QRU
+      ? R extends never
+        ? QRU
+        : R
       : MakeDataRequired<QRUb>,
     Ab = A
   >(
     newLoader: Partial<CreateLoaderArgs<Pb, QRUb, Rb, Ab>>
-  ) => Loader<Pb, Rb, Ab>;
+  ) => Loader<Pb, Rb, QRUb extends never ? QRU : QRUb, Ab>;
   /** The component to use to switch between rendering the different query states. */
   LoaderComponent: Component<CustomLoaderProps>;
 };
@@ -204,4 +207,4 @@ export type WithLoaderArgs<
   P extends unknown,
   R extends unknown,
   A = never
-> = Loader<P, R, A>;
+> = Loader<P, R, [], A>;

src/withLoader.tsx

@@ -6,10 +6,11 @@ import * as Types from "./types";
 export const withLoader = <
   P extends Record<string, any>,
   R extends unknown,
+  QRU extends readonly Types.UseQueryResult<unknown>[],
   A = never
 >(
   Component: Types.ComponentWithLoaderData<P, R>,
-  loader: Types.Loader<P, R, A>
+  loader: Types.Loader<P, R, QRU, A>
 ): Types.Component<P> => {
   let CachedComponent: Types.ComponentWithLoaderData<P, R>;
   const LoadedComponent = (props: P) => {

testing-app/src/tests.test.tsx

@@ -280,13 +280,13 @@ describe("withLoader", () => {
           [useGetPokemonByNameQuery(arg)] as const,
         queriesArg: (props: { name: string }) => props.name,
         onLoading: () => <div>Loading</div>,
+        transform: (q) => ({ test: "best" }),
       }).extend({
         queries: (arg: string) =>
           [
             useGetPokemonByNameQuery(arg),
             useGetPokemonsQuery(undefined),
           ] as const,
-        transform: (q) => q,
       });
 
       const Component = withLoader((props, loaderData) => {