refactor: Enhanced code readability slightly

Author: imp-dance

src/RTKLoader.tsx

@@ -20,31 +20,44 @@ type Props<T> = {
 export function RTKLoader<T>(
   props: Props<T>
 ): React.ReactElement {
-  if (props.query.isLoading || props.query.isUninitialized) {
+  const shouldLoad =
+    props.query.isLoading || props.query.isUninitialized;
+  const hasError = props.query.isError && props.query.error;
+  const isFetching = props.query.isFetching;
+
+  if (shouldLoad) {
     return props.loader ?? <React.Fragment />;
   }
-  if (props.query.isError && props.query.error) {
+
+  if (hasError) {
     return (
       props.onError?.(props.query.error as SerializedError) ?? (
         <React.Fragment />
       )
     );
   }
-  if (props.query.isFetching && props.onFetching) {
+
+  if (isFetching && props.onFetching) {
     return props.onFetching;
   }
+
   if (props.query.data !== undefined) {
+    const prepend = isFetching
+      ? props.whileFetching?.prepend ?? null
+      : null;
+    const append = isFetching
+      ? props.whileFetching?.append ?? null
+      : null;
+    const componentWithData = props.onSuccess(props.query.data);
+
     return (
       <>
-        {props.query.isFetching
-          ? props.whileFetching?.prepend ?? null
-          : null}
-        {props.onSuccess(props.query.data)}
-        {props.query.isFetching
-          ? props.whileFetching?.append ?? null
-          : null}
+        {prepend}
+        {componentWithData}
+        {append}
       </>
     );
   }
+
   return <React.Fragment />;
 }

src/createLoader.ts

@@ -8,8 +8,7 @@ export const createUseLoader = <
 >(
   createUseLoaderArgs: Types.CreateUseLoaderArgs<QRU, R, A>
 ): Types.UseLoader<A, R> => {
-  // useLoader
-  return (...args) => {
+  const useLoader = (...args: Types.OptionalGenericArg<A>) => {
     const createdQueries = createUseLoaderArgs.queries(...args);
     const aggregatedQuery = aggregateToQuery(createdQueries);
 
@@ -30,7 +29,7 @@ export const createUseLoader = <
 
     return aggregatedQuery as Types.UseQueryResult<R>;
   };
-  //
+  return useLoader;
 };
 
 export const createLoader = <

src/types.ts

@@ -85,7 +85,10 @@ export type WithLoaderArgs<
   A = never
 > = Loader<P, R, A>;
 
-type WhileFetchingArgs<P extends unknown, R extends unknown> = {
+export type WhileFetchingArgs<
+  P extends unknown,
+  R extends unknown
+> = {
   prepend?: (props: P, data?: R) => ReactElement;
   append?: (props: P, data?: R) => ReactElement;
 };
@@ -103,6 +106,7 @@ export type CreateLoaderArgs<
     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,
     renderBody: () => ReactElement
@@ -123,6 +127,7 @@ export type Loader<
     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,
     renderBody: () => ReactElement

src/withLoader.tsx

@@ -1,3 +1,5 @@
+import { SerializedError } from "@reduxjs/toolkit";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import React from "react";
 import { RTKLoader } from "./RTKLoader";
 import * as Types from "./types";
@@ -25,48 +27,51 @@ export const withLoader = <
       ) as unknown as Types.ComponentWithLoaderData<P, R>;
     }
 
+    const onLoading = args.onLoading?.(props);
+
+    const onError = args.onError
+      ? (error: SerializedError | FetchBaseQueryError) => {
+          if (!args.onError) return <React.Fragment />;
+          return args.onError(
+            props,
+            error,
+            query as Types.UseQueryResult<undefined>
+          );
+        }
+      : undefined;
+
+    const onSuccess = (data: R) => (
+      <CachedComponent {...props} ref={data} />
+    );
+
+    const whileFetching = args.whileFetching
+      ? {
+          prepend: args.whileFetching.prepend?.(
+            props,
+            query?.data
+          ),
+          append: args.whileFetching.append?.(
+            props,
+            query?.data
+          ),
+        }
+      : undefined;
+
+    const onFetching = args?.onFetching?.(
+      props,
+      query.data
+        ? () => onSuccess(query.data as R)
+        : () => <React.Fragment />
+    );
+
     return (
       <RTKLoader
         query={query}
-        loader={args.onLoading?.(props)}
-        onError={
-          args.onError
-            ? (error) =>
-                args.onError?.(
-                  props,
-                  error,
-                  query as Types.UseQueryResult<undefined>
-                ) ?? <React.Fragment />
-            : undefined
-        }
-        onSuccess={(data) => (
-          <CachedComponent {...props} ref={data} />
-        )}
-        whileFetching={
-          args.whileFetching
-            ? {
-                prepend: args.whileFetching?.prepend?.(
-                  props,
-                  query?.data
-                ),
-                append: args.whileFetching?.append?.(
-                  props,
-                  query?.data
-                ),
-              }
-            : undefined
-        }
-        onFetching={args?.onFetching?.(
-          props,
-          query.data
-            ? () => (
-                <CachedComponent
-                  {...props}
-                  ref={query.data as R}
-                />
-              )
-            : () => <React.Fragment />
-        )}
+        onSuccess={onSuccess}
+        onError={onError}
+        loader={onLoading}
+        onFetching={onFetching}
+        whileFetching={whileFetching}
       />
     );
   };