feat: useCreateLoader

chore: added example to alt libs in docs
chore: added more exports from local types

Author: imp-dance

docs/docs/Features/other-libs.md

@@ -12,6 +12,8 @@ Although `rtk-query-loader` was build with `@reduxjs/toolkit` in mind, the under
 
 ## Tanstack Query
 
+[See example on CodeSandbox](https://codesandbox.io/s/tanstack-query-rtk-query-loader-example-6393w2)
+
 ```typescript
 import {
   useQuery,

src/index.ts

@@ -7,6 +7,15 @@ export type {
   ComponentWithLoaderData,
   ConsumerProps,
   CreateUseLoaderArgs,
+  CreateLoaderArgs,
+  DeferredConfig,
+  LoaderConfig,
+  _TDeferred,
+  _TPayload,
+  _TQueries,
+  _TProps,
+  _TReturn,
+  MakeDataRequired,
   CustomLoaderProps,
   DataShapeInput,
   InferLoaderData,
@@ -19,3 +28,4 @@ export type {
 } from "./types";
 export { withLoader } from "./withLoader";
 export { AwaitLoader } from "./AwaitLoader";
+export { useCreateLoader } from "./useCreateLoader";

src/types.ts

@@ -155,9 +155,12 @@ export type CreateUseLoaderArgs<
     ...args: OptionalGenericArg<TArg>
   ) => DataShapeInput<TQueries, TDeferred, TPayload>;
   /** Transforms the output of the queries */
-  transform?: (
-    data: ResolveLoadedDataShape<TQueries, TDeferred, TPayload>
-  ) => TReturn;
+  transform?: LoaderTransformFunction<
+    TQueries,
+    TDeferred,
+    TPayload,
+    TReturn
+  >;
   config?: LoaderConfig;
 };
 

src/useCreateLoader.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import * as Types from "./types";
+import { createLoader } from "./createLoader";
+
+/**
+ * Allows you to create a loader inside of a component.
+ * This is useful if you want to create a loader for use with `AwaitLoader`, scoped to a component.
+ */
+export const useCreateLoader = <
+  TProps extends unknown,
+  TQueries extends Types._TQueries,
+  TDeferred extends Types._TDeferred,
+  TPayload extends Types._TPayload,
+  TReturn extends unknown = Types.ResolveDataShape<
+    Types.MakeDataRequired<TQueries>,
+    TDeferred,
+    TPayload
+  >,
+  TArg extends unknown = never
+>(
+  createLoaderArgs: Types.CreateLoaderArgs<
+    TProps,
+    TQueries,
+    TDeferred,
+    TPayload,
+    TReturn,
+    TArg
+  >
+) => {
+  return React.useRef(createLoader(createLoaderArgs)).current;
+};