chore: fixes for 1.0.0-beta.1

Author: imp-dance

src/createLoader.ts

@@ -14,7 +14,7 @@ export const createUseLoader = <
   A = never
 >(
   createUseLoaderArgs: Types.CreateUseLoaderArgs<Q, D, E, R, A>
-): Types.UseLoader<A, R> => {
+): Types.UseLoader<A, R, Q, D, E> => {
   const useLoader = (...args: Types.OptionalGenericArg<A>) => {
     const loaderRes = createUseLoaderArgs.useQueries(...args);
     const queriesList = loaderRes.queries
@@ -46,6 +46,8 @@ export const createUseLoader = <
 
     return aggregatedQuery as Types.UseQueryResult<R>;
   };
+
+  useLoader.original_args = createUseLoaderArgs;
   return useLoader;
 };
 
@@ -81,8 +83,8 @@ export const createLoader = <
       createLoaderArgs.loaderComponent ?? RTKLoader,
     extend: function <
       Qb extends Types._Q,
-      Db extends Types._D = Types._D,
-      Eb extends Types._E = Types._E,
+      Db extends Types._D,
+      Eb extends Types._E,
       Pb extends unknown = P,
       Rb = Qb extends unknown
         ? R
@@ -115,6 +117,13 @@ export const createLoader = <
           transform,
         });
         extendedLoader.useLoader = newUseLoader;
+      } else if (transform) {
+        const newUseLoader = createUseLoader({
+          useQueries:
+            extendedLoader.useLoader.original_args.useQueries,
+          transform,
+        });
+        extendedLoader.useLoader = newUseLoader;
       }
 
       return extendedLoader;

src/types.ts

@@ -77,7 +77,9 @@ export type ResolveDataShape<
     ? { queries: Q }
     : { queries: Q; payload: E }
   : E extends never
-  ? { queries: Q; deferredQueries: D }
+  ? D extends never
+    ? { queries: Q }
+    : { queries: Q; deferredQueries: D }
   : { queries: Q; deferredQueries: D; payload: E };
 
 /** Use: `(...args: OptionalGenericArg<T>) => void;`
@@ -118,10 +120,10 @@ export type CreateUseLoaderArgs<
   ) => R;
 };
 
-export type UseLoader<A, R> = (
-  ...args: OptionalGenericArg<A>
-) => UseQueryResult<R>;
-
+export type UseLoader<A, R, Q extends _Q, D extends _D, E> = {
+  (...args: OptionalGenericArg<A>): UseQueryResult<R>;
+  original_args: CreateUseLoaderArgs<Q, D, E, R, A>;
+};
 export type ComponentWithLoaderData<
   P extends Record<string, any>,
   R extends unknown
@@ -212,9 +214,9 @@ export type CreateLoaderArgs<
 
 export type CreateLoader<
   P extends unknown,
-  Q extends _Q,
-  D extends _D,
-  E extends _E,
+  Q extends _Q = never,
+  D extends _D = never,
+  E extends _E = never,
   R extends unknown = MakeDataRequired<Q>,
   A = never
 > = (
@@ -230,7 +232,7 @@ export type Loader<
   A = never
 > = {
   /** A hook that runs all queries and returns aggregated result */
-  useLoader: UseLoader<A, R>;
+  useLoader: UseLoader<A, R, Q, D, E>;
   /** Generates an argument for the `queries` based on component props */
   queriesArg?: (props: P) => A;
   /** Determines what to render while loading (with no data to fallback on) */
@@ -266,32 +268,7 @@ export type Loader<
     Ab = A
   >(
     newLoader: Partial<CreateLoaderArgs<Pb, Qb, Db, Eb, Rb, Ab>>
-  ) => Loader<
-    Pb,
-    Rb,
-    Qb extends Q
-      ? Db extends D
-        ? Eb extends E
-          ? Q
-          : Qb
-        : Qb
-      : Qb,
-    Qb extends Q
-      ? Db extends D
-        ? Eb extends E
-          ? D
-          : Db
-        : Db
-      : Db,
-    Qb extends Q
-      ? Db extends D
-        ? Eb extends E
-          ? E
-          : Eb
-        : Eb
-      : Eb,
-    Ab
-  >;
+  ) => Loader<Pb, Rb, Qb, Db, Eb, Ab>;
   /** The component to use to switch between rendering the different query states. */
   LoaderComponent: Component<CustomLoaderProps>;
 };

testing-app/src/tests.test.tsx

@@ -542,5 +542,76 @@ describe("withLoader", () => {
         expect(screen.getByText("loaded-deferred")).toBeVisible()
       );
     });
+
+    test("Can extend many times", async () => {
+      const Component = withLoader(
+        (props, loader) => {
+          return (
+            <div>
+              <div>{loader.queries.pokemon.data.name}</div>
+              <button
+                onClick={() => loader.payload.setName("error")}
+              >
+                error
+              </button>
+            </div>
+          );
+        },
+        createLoader({
+          onLoading: () => <div>Loading</div>,
+        })
+          .extend({
+            useQueries: () => {
+              const [name, setName] = useState("charizard");
+              return {
+                queries: {
+                  pokemon: useGetPokemonByNameQuery(name),
+                },
+                payload: {
+                  name,
+                  setName,
+                },
+              };
+            },
+          })
+          .extend({
+            onLoading: () => <div>Extended Loading</div>,
+          })
+          .extend({
+            onError: () => <div>Extended Error</div>,
+          })
+      );
+
+      render(<Component />);
+      expect(screen.getByText("Extended Loading")).toBeVisible();
+      await waitFor(() =>
+        expect(screen.getByText("charizard")).toBeVisible()
+      );
+      await userEvent.click(screen.getByRole("button"));
+      await waitFor(() =>
+        expect(screen.getByText("Extended Error")).toBeVisible()
+      );
+    });
+
+    test("Can extend with only transform", async () => {
+      const Component = withLoader(
+        (props, pokemon) => {
+          return <div>{pokemon.name}</div>;
+        },
+        createLoader({
+          useQueries: () => ({
+            queries: {
+              pokemon: useGetPokemonByNameQuery("charizard"),
+            },
+          }),
+        }).extend({
+          transform: (data) => data.queries.pokemon.data,
+        })
+      );
+      render(<Component />);
+      await waitFor(() =>
+        expect(screen.getByText("charizard")).toBeVisible()
+      );
+    });
   });
 });