version: 1.0.6

Fixes an issue (#18) with extending config, refactoring of code

Author: imp-dance

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryfylke-react/rtk-query-loader",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Lets you create reusable, extendable RTK loaders for React components.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

src/createLoader.ts

@@ -52,6 +52,7 @@ export const createUseLoader = <
         )
       : [];
     const aggregatedQuery = aggregateToQuery(queriesList);
+
     if (createUseLoaderArgs.config?.deferred?.shouldThrowError) {
       if (loaderRes.deferredQueries) {
         const deferredQueriesList = Object.keys(
@@ -60,6 +61,7 @@ export const createUseLoader = <
           (key) => (loaderRes.deferredQueries as TDeferred)[key]
         );
         if (deferredQueriesList.some((q) => q.isError)) {
+          aggregatedQuery.isSuccess = false;
           aggregatedQuery.isError = true;
           aggregatedQuery.error = deferredQueriesList.find(
             (q) => q.isError
@@ -173,7 +175,7 @@ export const createLoader = <
     >({
       useQueries,
       transform,
-      ...loaderArgs
+      ...extendedArgs
     }: Partial<
       Types.CreateLoaderArgs<
         E_TProps,
@@ -194,17 +196,14 @@ export const createLoader = <
       >;
       const mergedConfig = mergeConfig(
         original.config ?? {},
-        loaderArgs.config ?? {}
+        extendedArgs.config ?? {}
+      );
+
+      backwardsSupportLoaderComponent(
+        mergedConfig,
+        extendedArgs
       );
 
-      // For backwards support of `loaderComponent
-      if (
-        !mergedConfig.loaderComponent &&
-        loaderArgs.loaderComponent
-      ) {
-        mergedConfig.loaderComponent =
-          loaderArgs.loaderComponent;
-      }
       const extendedLoader: Types.Loader<
         E_TProps,
         E_TReturn,
@@ -214,7 +213,7 @@ export const createLoader = <
         E_TArg
       > = {
         ...original,
-        ...loaderArgs,
+        ...extendedArgs,
         config: mergedConfig,
       };
 
@@ -233,6 +232,15 @@ export const createLoader = <
           config: mergedConfig,
         });
         extendedLoader.useLoader = newUseLoader;
+      } else if (extendedArgs.config) {
+        const newUseLoader = createUseLoader({
+          useQueries:
+            extendedLoader.useLoader.original_args.useQueries,
+          transform:
+            extendedLoader.useLoader.original_args.transform,
+          config: mergedConfig,
+        });
+        extendedLoader.useLoader = newUseLoader;
       }
 
       return extendedLoader;
@@ -241,3 +249,23 @@ export const createLoader = <
 
   return loader;
 };
+
+function backwardsSupportLoaderComponent(
+  mergedConfig: Types.LoaderConfig,
+  extendedArgs: Types.CreateLoaderArgs<
+    any,
+    any,
+    any,
+    any,
+    any,
+    any
+  >
+) {
+  if (
+    !mergedConfig.loaderComponent &&
+    extendedArgs.loaderComponent
+  ) {
+    mergedConfig.loaderComponent = extendedArgs.loaderComponent;
+  }
+  return mergedConfig;
+}

src/createQuery.ts

@@ -26,78 +26,22 @@ export const useCreateQuery = <T extends unknown>(
 ): Types.UseQueryResult<T> => {
   const safeDependencies = dependencies ?? [];
   const requestId = R.useRef(requestIdGenerator()).current;
-  const [state, dispatch] = R.useReducer(
-    (
-      state: Types.UseQueryResult<T>,
-      action: Types.CreateQueryReducerAction<T>
-    ) => {
-      switch (action.type) {
-        case "load":
-          return {
-            ...state,
-            isSuccess: false,
-            isError: false,
-            isFetching: false,
-            isLoading: true,
-            isUninitialized: false,
-            startedTimeStamp: Date.now(),
-            refetch: action.payload.refetch,
-          };
-        case "fetch":
-          return {
-            ...state,
-            isLoading: false,
-            isSuccess: false,
-            isError: false,
-            isFetching: true,
-            isUninitialized: false,
-            startedTimeStamp: Date.now(),
-            refetch: action.payload.refetch,
-          };
-        case "success":
-          return {
-            ...state,
-            isLoading: false,
-            isFetching: false,
-            isError: false,
-            isUninitialized: false,
-            isSuccess: true,
-            data: action.payload.data,
-            currentData: action.payload.data,
-            fulfilledTimeStamp: Date.now(),
-          };
-        case "error":
-          return {
-            ...state,
-            isLoading: false,
-            isSuccess: false,
-            isFetching: false,
-            isUninitialized: false,
-            isError: true,
-            error: action.payload.error,
-            fulfilledTimeStamp: Date.now(),
-          };
-        default:
-          return state;
-      }
-    },
-    {
-      isLoading: true,
-      isSuccess: false,
-      isError: false,
-      isFetching: false,
-      refetch: () => {},
-      isUninitialized: true,
-      currentData: undefined,
-      data: undefined,
-      error: undefined,
-      endpointName: "",
-      fulfilledTimeStamp: 0,
-      originalArgs: safeDependencies,
-      requestId,
-      startedTimeStamp: 0,
-    }
-  );
+  const [state, dispatch] = R.useReducer(reducer, {
+    isLoading: true,
+    isSuccess: false,
+    isError: false,
+    isFetching: false,
+    refetch: () => {},
+    isUninitialized: true,
+    currentData: undefined,
+    data: undefined,
+    error: undefined,
+    endpointName: "",
+    fulfilledTimeStamp: 0,
+    originalArgs: safeDependencies,
+    requestId,
+    startedTimeStamp: 0,
+  });
 
   const runQuery = (overrideInitialized?: boolean) => {
     const fetchData = async () => {
@@ -123,10 +67,65 @@ export const useCreateQuery = <T extends unknown>(
 
   R.useEffect(() => runQuery(), safeDependencies);
 
-  return state;
+  return state as Types.UseQueryResult<T>;
 };
 
 export const _testCreateUseCreateQuery = (react: any) => {
   R = react as ReactType;
   return useCreateQuery;
 };
+
+const reducer = <T>(
+  state: Types.UseQueryResult<T>,
+  action: Types.CreateQueryReducerAction<T>
+) => {
+  switch (action.type) {
+    case "load":
+      return {
+        ...state,
+        isSuccess: false,
+        isError: false,
+        isFetching: false,
+        isLoading: true,
+        isUninitialized: false,
+        startedTimeStamp: Date.now(),
+        refetch: action.payload.refetch,
+      };
+    case "fetch":
+      return {
+        ...state,
+        isLoading: false,
+        isSuccess: false,
+        isError: false,
+        isFetching: true,
+        isUninitialized: false,
+        startedTimeStamp: Date.now(),
+        refetch: action.payload.refetch,
+      };
+    case "success":
+      return {
+        ...state,
+        isLoading: false,
+        isFetching: false,
+        isError: false,
+        isUninitialized: false,
+        isSuccess: true,
+        data: action.payload.data,
+        currentData: action.payload.data,
+        fulfilledTimeStamp: Date.now(),
+      };
+    case "error":
+      return {
+        ...state,
+        isLoading: false,
+        isSuccess: false,
+        isFetching: false,
+        isUninitialized: false,
+        isError: true,
+        error: action.payload.error,
+        fulfilledTimeStamp: Date.now(),
+      };
+    default:
+      return state;
+  }
+};

src/index.ts

@@ -1,31 +1,31 @@
+export { AwaitLoader } from "./AwaitLoader";
+export { RTKLoader } from "./RTKLoader";
 export { aggregateToQuery } from "./aggregateToQuery";
 export { createLoader, createUseLoader } from "./createLoader";
 export { useCreateQuery } from "./createQuery";
-export { RTKLoader } from "./RTKLoader";
 export type {
   Component,
   ComponentWithLoaderData,
   ConsumerProps,
-  CreateUseLoaderArgs,
   CreateLoaderArgs,
-  DeferredConfig,
-  LoaderConfig,
-  _TDeferred,
-  _TPayload,
-  _TQueries,
-  _TProps,
-  _TReturn,
-  MakeDataRequired,
+  CreateUseLoaderArgs,
   CustomLoaderProps,
   DataShapeInput,
+  DeferredConfig,
   InferLoaderData,
   Loader,
+  LoaderConfig,
   LoaderTransformFunction,
+  MakeDataRequired,
   OptionalGenericArg,
   UseLoader,
   UseQueryResult,
   WithLoaderArgs,
+  _TDeferred,
+  _TPayload,
+  _TProps,
+  _TQueries,
+  _TReturn,
 } from "./types";
-export { withLoader } from "./withLoader";
-export { AwaitLoader } from "./AwaitLoader";
 export { useCreateLoader } from "./useCreateLoader";
+export { withLoader } from "./withLoader";

testing-app/src/components/ErrorBoundary.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+export class ErrorBoundary extends React.Component<
+  {
+    children?: React.ReactNode;
+    fallback?: React.ReactNode;
+  },
+  {
+    hasError: boolean;
+  }
+> {
+  public state = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(_: Error) {
+    return { hasError: true };
+  }
+
+  public componentDidCatch(
+    error: Error,
+    errorInfo: React.ErrorInfo
+  ) {
+    console.error("Uncaught error:", error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <h1>{this.props.fallback ?? "_error_boundary_"}</h1>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;