From 9b19dba19638c4da9329a50a5514ab22f2847533 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon?= <haakonu97@gmail.com>
Date: Mon, 27 Feb 2023 20:12:18 +0100
Subject: [PATCH 1/4] fix: extend types

---
 src/createLoader.ts            | 25 ++++++++-------
 src/types.ts                   | 58 +++++++++++++++++++++-------------
 testing-app/src/tests.test.tsx | 14 ++++++--
 3 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/src/createLoader.ts b/src/createLoader.ts
index 846c5ca..05916f8 100644
--- a/src/createLoader.ts
+++ b/src/createLoader.ts
@@ -82,18 +82,21 @@ export const createLoader = <
     LoaderComponent:
       createLoaderArgs.loaderComponent ?? RTKLoader,
     extend: function <
-      Qb extends Types._Q,
-      Db extends Types._D,
-      Eb extends Types._E,
-      Pb extends unknown = P,
-      Rb = Qb extends unknown
+      Qb extends Types._Q = Q,
+      Db extends Types._D = D,
+      Eb extends Types._E = E,
+      Rb extends unknown = Types.AllEql<
+        Q,
+        Qb,
+        D,
+        Db,
+        E,
+        Eb
+      > extends true
         ? R
-        : Types.ResolveDataShape<
-            Types.MakeDataRequired<Qb>,
-            Db,
-            Eb
-          >,
-      Ab extends unknown = A
+        : Types.ResolveLoadedDataShape<Qb, Db, Eb>,
+      Pb extends unknown = P,
+      Ab = A
     >({
       useQueries,
       transform,
diff --git a/src/types.ts b/src/types.ts
index 9ecc757..07c7776 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -2,6 +2,22 @@ import { SerializedError } from "@reduxjs/toolkit";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import { ReactElement } from "react";
 
+export type AllNever<Q, D, E, R = never> =
+  | Q
+  | D
+  | E
+  | R extends never
+  ? true
+  : false;
+
+export type AllEql<Q, Qb, D, Db, E, Eb> = Q extends Qb
+  ? D extends Db
+    ? E extends Eb
+      ? true
+      : false
+    : false
+  : false;
+
 /** Result of a RTK useQuery hook */
 export type UseQueryResult<T> = {
   // Base query state
@@ -39,9 +55,9 @@ export type UseQueryResult<T> = {
 };
 
 /** _X are types that are extended from in the generics */
-export type _Q = Record<string, UseQueryResult<unknown>>;
-export type _D = Record<string, UseQueryResult<unknown>>;
-export type _E = unknown;
+export type _Q = Record<string, UseQueryResult<unknown>> | never;
+export type _D = Record<string, UseQueryResult<unknown>> | never;
+export type _E = unknown | never;
 export type _P = Record<string, unknown>;
 export type _R = unknown;
 
@@ -50,7 +66,7 @@ export type MakeDataRequired<T extends _Q> = {
   [K in keyof T]: T[K] & { data: NonNullable<T[K]["data"]> };
 };
 
-export type DataShape<
+export type DataShapeInput<
   Q extends _Q,
   D extends _D,
   E extends _E
@@ -82,6 +98,12 @@ export type ResolveDataShape<
     : { queries: Q; deferredQueries: D }
   : { queries: Q; deferredQueries: D; payload: E };
 
+export type ResolveLoadedDataShape<
+  Q extends _Q,
+  D extends _D,
+  E extends _E
+> = ResolveDataShape<MakeDataRequired<Q>, D, E>;
+
 /** Use: `(...args: OptionalGenericArg<T>) => void;`
  * Allows either `T` or `none` for the parameter
  */
@@ -92,7 +114,7 @@ export type LoaderTransformFunction<
   D extends _D,
   E extends _E,
   R extends unknown
-> = (data: ResolveDataShape<MakeDataRequired<Q>, D, E>) => R;
+> = (data: ResolveLoadedDataShape<Q, D, E>) => R;
 
 export type CreateUseLoaderArgs<
   Q extends _Q,
@@ -113,11 +135,9 @@ export type CreateUseLoaderArgs<
    */
   useQueries: (
     ...args: OptionalGenericArg<A>
-  ) => DataShape<Q, D, E>;
+  ) => DataShapeInput<Q, D, E>;
   /** Transforms the output of the queries */
-  transform?: (
-    data: ResolveDataShape<MakeDataRequired<Q>, D, E>
-  ) => R;
+  transform?: (data: ResolveLoadedDataShape<Q, D, E>) => R;
 };
 
 export type UseLoader<A, R, Q extends _Q, D extends _D, E> = {
@@ -188,7 +208,7 @@ export type CreateLoaderArgs<
   Q extends _Q,
   D extends _D,
   E extends _E,
-  R extends unknown = MakeDataRequired<Q>,
+  R extends unknown,
   A = never
 > = Partial<CreateUseLoaderArgs<Q, D, E, R, A>> & {
   /** Generates an argument for the `queries` based on component props */
@@ -226,9 +246,9 @@ export type CreateLoader<
 export type Loader<
   P extends unknown,
   R extends unknown,
-  Q extends _Q,
-  D extends _D,
-  E extends _E,
+  Q extends _Q = never,
+  D extends _D = never,
+  E extends _E = never,
   A = never
 > = {
   /** A hook that runs all queries and returns aggregated result */
@@ -255,16 +275,10 @@ export type Loader<
     Qb extends _Q = Q,
     Db extends _D = D,
     Eb extends _E = E,
+    Rb extends unknown = AllEql<Q, Qb, D, Db, E, Eb> extends true
+      ? R
+      : ResolveLoadedDataShape<Qb, Db, Eb>,
     Pb extends unknown = P,
-    Rb extends unknown = ResolveDataShape<
-      Qb,
-      Db,
-      Eb
-    > extends never
-      ? R extends never
-        ? Q
-        : R
-      : ResolveDataShape<MakeDataRequired<Qb>, Db, Eb>,
     Ab = A
   >(
     newLoader: Partial<CreateLoaderArgs<Pb, Qb, Db, Eb, Rb, Ab>>
diff --git a/testing-app/src/tests.test.tsx b/testing-app/src/tests.test.tsx
index 136fd0d..690824c 100644
--- a/testing-app/src/tests.test.tsx
+++ b/testing-app/src/tests.test.tsx
@@ -549,6 +549,7 @@ describe("withLoader", () => {
           return (
             <div>
               <div>{loader.queries.pokemon.data.name}</div>
+              <div>{loader.foobar}</div>
               <button
                 onClick={() => loader.payload.setName("error")}
               >
@@ -575,18 +576,27 @@ describe("withLoader", () => {
             },
           })
           .extend({
-            onLoading: () => <div>Extended Loading</div>,
+            onLoading: () => <div>Extended Loading One</div>,
           })
           .extend({
             onError: () => <div>Extended Error</div>,
           })
+          .extend({
+            transform: (data) => ({ ...data, foobar: "foobar" }),
+          })
+          .extend({
+            onLoading: () => <div>Extended Loading Two</div>,
+          })
       );
 
       render(<Component />);
-      expect(screen.getByText("Extended Loading")).toBeVisible();
+      expect(
+        screen.getByText("Extended Loading Two")
+      ).toBeVisible();
       await waitFor(() =>
         expect(screen.getByText("charizard")).toBeVisible()
       );
+      expect(screen.getByText("foobar")).toBeVisible();
       await userEvent.click(screen.getByRole("button"));
       await waitFor(() =>
         expect(screen.getByText("Extended Error")).toBeVisible()

From fdadf87534d9946ff384a62df882b2a4bd23a7e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon?= <haakonu97@gmail.com>
Date: Mon, 27 Feb 2023 20:27:32 +0100
Subject: [PATCH 2/4] version: 1.0.1-beta.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5e9aa38..8d6aa3f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ryfylke-react/rtk-query-loader",
-  "version": "1.0.0",
+  "version": "1.0.1-beta.0",
   "description": "Lets you create reusable, extendable RTK loaders for React components.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

From 3b9434c4cd7b4ca6dba26be9fd1a9c2fe65ad2a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon?= <haakonu97@gmail.com>
Date: Tue, 28 Feb 2023 16:26:25 +0100
Subject: [PATCH 3/4] refactor: Generic names, fixed docs npm badge

---
 docs/src/css/custom.css |   3 +-
 src/createLoader.ts     | 161 ++++++++++++------
 src/types.ts            | 355 +++++++++++++++++++++++++---------------
 3 files changed, 336 insertions(+), 183 deletions(-)

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index c23267a..41ae2d2 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -39,8 +39,9 @@
   display: none;
 }
 .icon-npm::after {
+  background-color: rgb(55, 55, 55);
   background-image: url("https://img.shields.io/npm/v/@ryfylke-react/rtk-query-loader?color=gray&style=flat-square");
-  width: 88px;
+  width: 80px;
   height: 20px;
   content: "";
   display: flex;
diff --git a/src/createLoader.ts b/src/createLoader.ts
index 05916f8..0f9ffc3 100644
--- a/src/createLoader.ts
+++ b/src/createLoader.ts
@@ -3,23 +3,37 @@ import { RTKLoader } from "./RTKLoader";
 import * as Types from "./types";
 
 export const createUseLoader = <
-  Q extends Types._Q,
-  D extends Types._D,
-  E extends Types._E,
-  R extends unknown = Types.ResolveDataShape<
-    Types.MakeDataRequired<Q>,
-    D,
-    E
+  TQueries extends Types._TQueries,
+  TDeferred extends Types._TDeferred,
+  TPayload extends Types._TPayload,
+  TReturn extends unknown = Types.ResolveDataShape<
+    Types.MakeDataRequired<TQueries>,
+    TDeferred,
+    TPayload
   >,
-  A = never
+  TArg = never
 >(
-  createUseLoaderArgs: Types.CreateUseLoaderArgs<Q, D, E, R, A>
-): Types.UseLoader<A, R, Q, D, E> => {
-  const useLoader = (...args: Types.OptionalGenericArg<A>) => {
+  createUseLoaderArgs: Types.CreateUseLoaderArgs<
+    TQueries,
+    TDeferred,
+    TPayload,
+    TReturn,
+    TArg
+  >
+): Types.UseLoader<
+  TArg,
+  TReturn,
+  TQueries,
+  TDeferred,
+  TPayload
+> => {
+  const useLoader = (
+    ...args: Types.OptionalGenericArg<TArg>
+  ) => {
     const loaderRes = createUseLoaderArgs.useQueries(...args);
     const queriesList = loaderRes.queries
       ? Object.keys(loaderRes.queries).map(
-          (key) => (loaderRes.queries as Q)[key]
+          (key) => (loaderRes.queries as TQueries)[key]
         )
       : [];
     const aggregatedQuery = aggregateToQuery(queriesList);
@@ -28,9 +42,9 @@ export const createUseLoader = <
       const data = createUseLoaderArgs.transform
         ? createUseLoaderArgs.transform(
             loaderRes as Types.ResolveDataShape<
-              Types.MakeDataRequired<Q>,
-              D,
-              E
+              Types.MakeDataRequired<TQueries>,
+              TDeferred,
+              TPayload
             >
           )
         : loaderRes;
@@ -41,10 +55,10 @@ export const createUseLoader = <
         data,
         currentData: data,
         originalArgs: args,
-      } as Types.UseQueryResult<R>;
+      } as Types.UseQueryResult<TReturn>;
     }
 
-    return aggregatedQuery as Types.UseQueryResult<R>;
+    return aggregatedQuery as Types.UseQueryResult<TReturn>;
   };
 
   useLoader.original_args = createUseLoaderArgs;
@@ -52,27 +66,48 @@ export const createUseLoader = <
 };
 
 export const createLoader = <
-  P extends unknown,
-  Q extends Types._Q,
-  D extends Types._D,
-  E extends Types._E,
-  R extends unknown = Types.ResolveDataShape<
-    Types.MakeDataRequired<Q>,
-    D,
-    E
+  TProps extends unknown,
+  TQueries extends Types._TQueries = never,
+  TDeferred extends Types._TDeferred = never,
+  TPayload extends Types._TPayload = never,
+  TReturn extends unknown = Types.ResolveDataShape<
+    Types.MakeDataRequired<TQueries>,
+    TDeferred,
+    TPayload
   >,
-  A extends unknown = never
+  TArg extends unknown = never
 >(
-  createLoaderArgs: Types.CreateLoaderArgs<P, Q, D, E, R, A>
-): Types.Loader<P, R, Q, D, E, A> => {
+  createLoaderArgs: Types.CreateLoaderArgs<
+    TProps,
+    TQueries,
+    TDeferred,
+    TPayload,
+    TReturn,
+    TArg
+  >
+): Types.Loader<
+  TProps,
+  TReturn,
+  TQueries,
+  TDeferred,
+  TPayload,
+  TArg
+> => {
   const useLoader = createUseLoader({
     useQueries:
       createLoaderArgs.useQueries ??
-      (() => ({} as unknown as Q)),
+      (() => ({} as unknown as TQueries)),
     transform: createLoaderArgs.transform,
   });
 
-  const loader: Types.Loader<P, R, Q, D, E, A> = {
+  const loader: Types.Loader<
+    TProps,
+    TReturn,
+    TQueries,
+    TDeferred,
+    TPayload,
+    TArg
+  > = {
     useLoader,
     onLoading: createLoaderArgs.onLoading,
     onError: createLoaderArgs.onError,
@@ -82,37 +117,57 @@ export const createLoader = <
     LoaderComponent:
       createLoaderArgs.loaderComponent ?? RTKLoader,
     extend: function <
-      Qb extends Types._Q = Q,
-      Db extends Types._D = D,
-      Eb extends Types._E = E,
-      Rb extends unknown = Types.AllEql<
-        Q,
-        Qb,
-        D,
-        Db,
-        E,
-        Eb
+      E_TQueries extends Types._TQueries = TQueries,
+      E_TDeferred extends Types._TDeferred = TDeferred,
+      E_TPayload extends Types._TPayload = TPayload,
+      E_TReturn extends unknown = Types.AllEql<
+        TQueries,
+        E_TQueries,
+        TDeferred,
+        E_TDeferred,
+        TPayload,
+        E_TPayload
       > extends true
-        ? R
-        : Types.ResolveLoadedDataShape<Qb, Db, Eb>,
-      Pb extends unknown = P,
-      Ab = A
+        ? TReturn
+        : Types.ResolveLoadedDataShape<
+            E_TQueries,
+            E_TDeferred,
+            E_TPayload
+          >,
+      E_TProps extends unknown = TProps,
+      E_TArg = TArg
     >({
       useQueries,
       transform,
       ...loaderArgs
-    }: Partial<Types.CreateLoaderArgs<Pb, Qb, Db, Eb, Rb, Ab>>) {
-      const extendedLoader = {
+    }: Partial<
+      Types.CreateLoaderArgs<
+        E_TProps,
+        E_TQueries,
+        E_TDeferred,
+        E_TPayload,
+        E_TReturn,
+        E_TArg
+      >
+    >) {
+      const extendedLoader: Types.Loader<
+        E_TProps,
+        E_TReturn,
+        E_TQueries,
+        E_TDeferred,
+        E_TPayload,
+        E_TArg
+      > = {
         ...(this as unknown as Types.Loader<
-          Pb,
-          Rb,
-          Qb,
-          Db,
-          Eb,
-          Ab
+          E_TProps,
+          E_TReturn,
+          E_TQueries,
+          E_TDeferred,
+          E_TPayload,
+          E_TArg
         >),
         ...loaderArgs,
-      } as Types.Loader<Pb, Rb, Qb, Db, Eb, Ab>;
+      };
 
       if (useQueries) {
         const newUseLoader = createUseLoader({
diff --git a/src/types.ts b/src/types.ts
index 07c7776..6177272 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -2,17 +2,25 @@ import { SerializedError } from "@reduxjs/toolkit";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import { ReactElement } from "react";
 
-export type AllNever<Q, D, E, R = never> =
-  | Q
-  | D
-  | E
-  | R extends never
+export type AllNever<
+  TQueries,
+  TDeferred,
+  TPayload,
+  TReturn = never
+> = TQueries | TDeferred | TPayload | TReturn extends never
   ? true
   : false;
 
-export type AllEql<Q, Qb, D, Db, E, Eb> = Q extends Qb
-  ? D extends Db
-    ? E extends Eb
+export type AllEql<
+  TQueries,
+  E_TQueries,
+  TDeferred,
+  E_TDeferred,
+  TPayload,
+  E_TPayload
+> = TQueries extends E_TQueries
+  ? TDeferred extends E_TDeferred
+    ? TPayload extends E_TPayload
       ? true
       : false
     : false
@@ -55,54 +63,50 @@ export type UseQueryResult<T> = {
 };
 
 /** _X are types that are extended from in the generics */
-export type _Q = Record<string, UseQueryResult<unknown>> | never;
-export type _D = Record<string, UseQueryResult<unknown>> | never;
-export type _E = unknown | never;
-export type _P = Record<string, unknown>;
-export type _R = unknown;
+export type _TQueries =
+  | Record<string, UseQueryResult<unknown>>
+  | never;
+export type _TDeferred =
+  | Record<string, UseQueryResult<unknown>>
+  | never;
+export type _TPayload = unknown | never;
+export type _TProps = Record<string, unknown>;
+export type _TReturn = unknown;
 
-export type MakeDataRequired<T extends _Q> = {
+export type MakeDataRequired<T extends _TQueries> = {
   // @ts-ignore: TS2536: Type '"data"' cannot be used to index type 'T[K]'.
   [K in keyof T]: T[K] & { data: NonNullable<T[K]["data"]> };
 };
 
 export type DataShapeInput<
-  Q extends _Q,
-  D extends _D,
-  E extends _E
+  TQueries extends _TQueries,
+  TDeferred extends _TDeferred,
+  TPayload extends _TPayload
 > = {
-  queries?: Q;
-  deferredQueries?: D;
-  payload?: E;
+  queries?: TQueries;
+  deferredQueries?: TDeferred;
+  payload?: TPayload;
 };
 
 export type ResolveDataShape<
-  Q extends _Q,
-  D extends _D,
-  E extends _E
-> = Q extends never
-  ? D extends never
-    ? E extends never
-      ? never
-      : { payload: E }
-    : E extends never
-    ? { deferredQueries: D }
-    : { deferredQueries: D; payload: E }
-  : D extends never
-  ? E extends never
-    ? { queries: Q }
-    : { queries: Q; payload: E }
-  : E extends never
-  ? D extends never
-    ? { queries: Q }
-    : { queries: Q; deferredQueries: D }
-  : { queries: Q; deferredQueries: D; payload: E };
+  TQueries extends _TQueries,
+  TDeferred extends _TDeferred,
+  TPayload extends _TPayload
+> = {
+  queries: TQueries extends never ? never : TQueries;
+  deferredQueries: TDeferred extends never ? never : TDeferred;
+  payload: TPayload extends never ? never : TPayload;
+};
 
 export type ResolveLoadedDataShape<
-  Q extends _Q,
-  D extends _D,
-  E extends _E
-> = ResolveDataShape<MakeDataRequired<Q>, D, E>;
+  TQueries extends _TQueries,
+  TDeferred extends _TDeferred,
+  TPayload extends _TPayload
+> = ResolveDataShape<
+  MakeDataRequired<TQueries>,
+  TDeferred,
+  TPayload
+>;
 
 /** Use: `(...args: OptionalGenericArg<T>) => void;`
  * Allows either `T` or `none` for the parameter
@@ -110,18 +114,20 @@ export type ResolveLoadedDataShape<
 export type OptionalGenericArg<T> = T extends never ? [] : [T];
 
 export type LoaderTransformFunction<
-  Q extends _Q,
-  D extends _D,
-  E extends _E,
-  R extends unknown
-> = (data: ResolveLoadedDataShape<Q, D, E>) => R;
+  TQueries extends _TQueries,
+  TDeferred extends _TDeferred,
+  TPayload extends _TPayload,
+  TReturn extends unknown
+> = (
+  data: ResolveLoadedDataShape<TQueries, TDeferred, TPayload>
+) => TReturn;
 
 export type CreateUseLoaderArgs<
-  Q extends _Q,
-  D extends _D,
-  E extends _E,
-  R extends _R,
-  A = never
+  TQueries extends _TQueries,
+  TDeferred extends _TDeferred,
+  TPayload extends _TPayload,
+  TReturn extends _TReturn,
+  TArg = never
 > = {
   /** Should return a list of RTK useQuery results.
    * Example:
@@ -134,51 +140,84 @@ export type CreateUseLoaderArgs<
    * ```
    */
   useQueries: (
-    ...args: OptionalGenericArg<A>
-  ) => DataShapeInput<Q, D, E>;
+    ...args: OptionalGenericArg<TArg>
+  ) => DataShapeInput<TQueries, TDeferred, TPayload>;
   /** Transforms the output of the queries */
-  transform?: (data: ResolveLoadedDataShape<Q, D, E>) => R;
+  transform?: (
+    data: ResolveLoadedDataShape<TQueries, TDeferred, TPayload>
+  ) => TReturn;
 };
 
-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 UseLoader<
+  TArg,
+  TReturn,
+  TQueries extends _TQueries,
+  TDeferred extends _TDeferred,
+  TPayload
+> = {
+  (...args: OptionalGenericArg<TArg>): UseQueryResult<TReturn>;
+  original_args: CreateUseLoaderArgs<
+    TQueries,
+    TDeferred,
+    TPayload,
+    TReturn,
+    TArg
+  >;
 };
 export type ComponentWithLoaderData<
-  P extends Record<string, any>,
-  R extends unknown
-> = (props: P, loaderData: R) => ReactElement;
+  TProps extends Record<string, any>,
+  TReturn extends unknown
+> = (props: TProps, loaderData: TReturn) => ReactElement;
 
 /** Use: `InferLoaderData<typeof loader>`. Returns the return-value of the given loader's aggregated query. */
 export type InferLoaderData<T> = T extends Loader<
-  any,
-  infer X,
-  any,
-  any,
-  any,
-  any
+  any | never,
+  infer InferA,
+  any | never,
+  any | never,
+  any | never,
+  any | never
 >
-  ? X
-  : T extends Loader<never, infer Y, any, any, any, any>
-  ? Y
-  : T extends Loader<any, infer Z, never, any, any, any>
-  ? Z
-  : T extends Loader<any, infer W, any, any, any, never>
-  ? W
-  : "could not parse";
+  ? InferA
+  : T extends Loader<any, infer InferB, never, any, any, any>
+  ? InferB
+  : T extends Loader<any, infer InferC, never, never, any, any>
+  ? InferC
+  : T extends Loader<any, infer InferD, never, never, never, any>
+  ? InferD
+  : T extends Loader<
+      any,
+      infer InferE,
+      never,
+      never,
+      never,
+      never
+    >
+  ? InferE
+  : T extends Loader<any, infer InferF, any, never, never, never>
+  ? InferF
+  : T extends Loader<any, infer InferG, any, any, never, never>
+  ? InferG
+  : T extends Loader<any, infer InferH, any, any, any, never>
+  ? InferH
+  : T extends Loader<any, infer InferI, any, never, any, any>
+  ? InferI
+  : T extends Loader<any, infer InferJ, any, never, never, any>
+  ? InferJ
+  : never;
 
-export type Component<P extends Record<string, any>> = (
-  props: P
+export type Component<TProps extends Record<string, any>> = (
+  props: TProps
 ) => ReactElement;
 
 export type WhileFetchingArgs<
-  P extends unknown,
-  R extends unknown
+  TProps extends unknown,
+  TReturn extends unknown
 > = {
   /** Will be prepended before the component while the query is fetching */
-  prepend?: (props: P, data?: R) => ReactElement;
+  prepend?: (props: TProps, data?: TReturn) => ReactElement;
   /** Will be appended after the component while the query is fetching */
-  append?: (props: P, data?: R) => ReactElement;
+  append?: (props: TProps, data?: TReturn) => ReactElement;
 };
 
 export type CustomLoaderProps<T = unknown> = {
@@ -204,85 +243,140 @@ export type CustomLoaderProps<T = unknown> = {
 };
 
 export type CreateLoaderArgs<
-  P extends unknown,
-  Q extends _Q,
-  D extends _D,
-  E extends _E,
-  R extends unknown,
-  A = never
-> = Partial<CreateUseLoaderArgs<Q, D, E, R, A>> & {
+  TProps extends unknown,
+  TQueries extends _TQueries,
+  TDeferred extends _TDeferred,
+  TPayload extends _TPayload,
+  TReturn extends unknown,
+  TArg = never
+> = Partial<
+  CreateUseLoaderArgs<
+    TQueries,
+    TDeferred,
+    TPayload,
+    TReturn,
+    TArg
+  >
+> & {
   /** Generates an argument for the `queries` based on component props */
-  queriesArg?: (props: P) => A;
+  queriesArg?: (props: TProps) => TArg;
   /** Determines what to render while loading (with no data to fallback on) */
-  onLoading?: (props: P) => ReactElement;
+  onLoading?: (props: TProps) => ReactElement;
   /** Determines what to render when query fails. */
   onError?: (
-    props: P,
+    props: TProps,
     error: FetchBaseQueryError | SerializedError,
     joinedQuery: UseQueryResult<undefined>
   ) => ReactElement;
   /** @deprecated Using onFetching might result in loss of internal state. Use `whileFetching` instead, or pass the query to the component */
   onFetching?: (
-    props: P,
+    props: TProps,
     renderBody: () => ReactElement
   ) => ReactElement;
   /** Determines what to render besides success-result while query is fetching. */
-  whileFetching?: WhileFetchingArgs<P, R>;
+  whileFetching?: WhileFetchingArgs<TProps, TReturn>;
   /** The component to use to switch between rendering the different query states. */
   loaderComponent?: Component<CustomLoaderProps>;
 };
 
 export type CreateLoader<
-  P extends unknown,
-  Q extends _Q = never,
-  D extends _D = never,
-  E extends _E = never,
-  R extends unknown = MakeDataRequired<Q>,
-  A = never
+  TProps extends unknown,
+  TQueries extends _TQueries = never,
+  TDeferred extends _TDeferred = never,
+  TPayload extends _TPayload = never,
+  TReturn extends unknown = MakeDataRequired<TQueries>,
+  TArg = never
 > = (
-  args: CreateLoaderArgs<P, Q, D, E, R, A>
-) => Loader<P, R, Q, D, E, A>;
+  args: CreateLoaderArgs<
+    TProps,
+    TQueries,
+    TDeferred,
+    TPayload,
+    TReturn,
+    TArg
+  >
+) => Loader<
+  TProps,
+  TReturn,
+  TQueries,
+  TDeferred,
+  TPayload,
+  TArg
+>;
 
 export type Loader<
-  P extends unknown,
-  R extends unknown,
-  Q extends _Q = never,
-  D extends _D = never,
-  E extends _E = never,
-  A = never
+  TProps extends unknown,
+  TReturn extends unknown,
+  TQueries extends _TQueries = never,
+  TDeferred extends _TDeferred = never,
+  TPayload extends _TPayload = never,
+  TArg = never
 > = {
   /** A hook that runs all queries and returns aggregated result */
-  useLoader: UseLoader<A, R, Q, D, E>;
+  useLoader: UseLoader<
+    TArg,
+    TReturn,
+    TQueries,
+    TDeferred,
+    TPayload
+  >;
   /** Generates an argument for the `queries` based on component props */
-  queriesArg?: (props: P) => A;
+  queriesArg?: (props: TProps) => TArg;
   /** Determines what to render while loading (with no data to fallback on) */
-  onLoading?: (props: P) => ReactElement;
+  onLoading?: (props: TProps) => ReactElement;
   /** Determines what to render when query fails. */
   onError?: (
-    props: P,
+    props: TProps,
     error: SerializedError | FetchBaseQueryError,
     joinedQuery: UseQueryResult<undefined>
   ) => ReactElement;
   /** @deprecated Using onFetching might result in loss of internal state. Use `whileFetching` instead, or pass the query to the component */
   onFetching?: (
-    props: P,
+    props: TProps,
     renderBody: () => ReactElement
   ) => ReactElement;
   /** Determines what to render besides success-result while query is fetching. */
-  whileFetching?: WhileFetchingArgs<P, R>;
+  whileFetching?: WhileFetchingArgs<TProps, TReturn>;
   /** Returns a new `Loader` extended from this `Loader`, with given overrides. */
   extend: <
-    Qb extends _Q = Q,
-    Db extends _D = D,
-    Eb extends _E = E,
-    Rb extends unknown = AllEql<Q, Qb, D, Db, E, Eb> extends true
-      ? R
-      : ResolveLoadedDataShape<Qb, Db, Eb>,
-    Pb extends unknown = P,
-    Ab = A
+    E_TQueries extends _TQueries = TQueries,
+    E_TDeferred extends _TDeferred = TDeferred,
+    E_TPayload extends _TPayload = TPayload,
+    E_TReturn extends unknown = AllEql<
+      TQueries,
+      E_TQueries,
+      TDeferred,
+      E_TDeferred,
+      TPayload,
+      E_TPayload
+    > extends true
+      ? TReturn
+      : ResolveLoadedDataShape<
+          E_TQueries,
+          E_TDeferred,
+          E_TPayload
+        >,
+    E_TProps extends unknown = TProps,
+    E_TArg = TArg
   >(
-    newLoader: Partial<CreateLoaderArgs<Pb, Qb, Db, Eb, Rb, Ab>>
-  ) => Loader<Pb, Rb, Qb, Db, Eb, Ab>;
+    newLoader: Partial<
+      CreateLoaderArgs<
+        E_TProps,
+        E_TQueries,
+        E_TDeferred,
+        E_TPayload,
+        E_TReturn,
+        E_TArg
+      >
+    >
+  ) => Loader<
+    E_TProps,
+    E_TReturn,
+    E_TQueries,
+    E_TDeferred,
+    E_TPayload,
+    E_TArg
+  >;
   /** The component to use to switch between rendering the different query states. */
   LoaderComponent: Component<CustomLoaderProps>;
 };
@@ -310,11 +404,14 @@ export type CreateQueryReducerAction<T extends unknown> =
       };
     };
 
+export type ConsumerProps<T extends Record<string, unknown>> =
+  Record<string, unknown> & T;
+
 /************************************************/
 /*  Legacy/unused, for backwards compatibility  */
 /************************************************/
 export type WithLoaderArgs<
-  P extends unknown,
-  R extends unknown,
-  A = never
-> = Loader<P, R, _Q, _Q, unknown, A>;
+  TProps extends unknown,
+  TReturn extends unknown,
+  TArg = never
+> = Loader<TProps, TReturn, _TQueries, _TQueries, unknown, TArg>;

From ab380bcd4f1bc3ab3458f2f2422676b4364db43f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon?= <haakonu97@gmail.com>
Date: Tue, 28 Feb 2023 17:09:50 +0100
Subject: [PATCH 4/4] fix: types in withLoader

---
 src/index.ts       |  2 ++
 src/withLoader.tsx | 48 ++++++++++++++++++++++++++++++----------------
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 8e8bd36..02083d8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,8 +5,10 @@ export { RTKLoader } from "./RTKLoader";
 export type {
   Component,
   ComponentWithLoaderData,
+  ConsumerProps,
   CreateUseLoaderArgs,
   CustomLoaderProps,
+  DataShapeInput,
   InferLoaderData,
   Loader,
   LoaderTransformFunction,
diff --git a/src/withLoader.tsx b/src/withLoader.tsx
index ba4281c..17e8cca 100644
--- a/src/withLoader.tsx
+++ b/src/withLoader.tsx
@@ -4,29 +4,45 @@ import React from "react";
 import * as Types from "./types";
 
 export const withLoader = <
-  P extends Record<string, any>,
-  R extends unknown,
-  Q extends Types._Q,
-  D extends Types._D,
-  E extends Types._E,
-  A = never
+  TProps extends Record<string, any>,
+  TReturn extends unknown,
+  TQueries extends Types._TQueries,
+  TDeferred extends Types._TDeferred,
+  TPayload extends Types._TPayload,
+  TArg = never
 >(
-  Component: Types.ComponentWithLoaderData<P, R>,
-  loader: Types.Loader<P, R, Q, D, E, A>
-): Types.Component<P> => {
-  let CachedComponent: Types.ComponentWithLoaderData<P, R>;
-  const LoadedComponent = (props: P) => {
+  Component: Types.ComponentWithLoaderData<TProps, TReturn>,
+  loader: Types.Loader<
+    TProps,
+    TReturn,
+    TQueries,
+    TDeferred,
+    TPayload,
+    TArg
+  >
+): Types.Component<TProps> => {
+  let CachedComponent: Types.ComponentWithLoaderData<
+    TProps,
+    TReturn
+  >;
+  const LoadedComponent = (props: TProps) => {
     const useLoaderArgs = [];
     if (loader.queriesArg) {
       useLoaderArgs.push(loader.queriesArg(props));
     }
     const query = loader.useLoader(
-      ...(useLoaderArgs as Types.OptionalGenericArg<A>)
+      ...(useLoaderArgs as Types.OptionalGenericArg<TArg>)
     );
     if (!CachedComponent) {
       CachedComponent = React.forwardRef(
-        Component as React.ForwardRefRenderFunction<R, P>
-      ) as unknown as Types.ComponentWithLoaderData<P, R>;
+        Component as React.ForwardRefRenderFunction<
+          TReturn,
+          TProps
+        >
+      ) as unknown as Types.ComponentWithLoaderData<
+        TProps,
+        TReturn
+      >;
     }
 
     const onLoading = loader.onLoading?.(props);
@@ -42,7 +58,7 @@ export const withLoader = <
         }
       : undefined;
 
-    const onSuccess = (data: R) => (
+    const onSuccess = (data: TReturn) => (
       <CachedComponent {...props} ref={data} />
     );
 
@@ -62,7 +78,7 @@ export const withLoader = <
     const onFetching = loader?.onFetching?.(
       props,
       query.data
-        ? () => onSuccess(query.data as R)
+        ? () => onSuccess(query.data as TReturn)
         : () => <React.Fragment />
     );