feat: New config property, better InferLoaderData,

Author: imp-dance

docs/docs/Features/defer-queries.md

@@ -30,7 +30,22 @@ const loader = createLoader({
 });
 ```
 
-Deferred queries
+## Configure
 
-- Do not affect the loading state
-- Cause the component to rerender when fulfilled
+> **New in version 1.0.3**
+
+You can pass a `Config` to your `Loader`s:
+
+```typescript {4-8}
+const loader = createLoader({
+    useQueries: () => ({...}),
+    onError: () => (...),
+    config: {
+        deferred: {
+            shouldThrowError: true,
+        },
+    }
+})
+```
+
+- `shouldThrowError` - Determines whether or not `deferredQueries` should send the component to the `onError` view if one of the deferred queries end up in a error state.

docs/docs/Quick Guide/index.mdx

@@ -6,6 +6,6 @@ import DocCardList from "@theme/DocCardList";
 
 # Quick guide
 
-`rtk-query-loader` is a tool that you can use to clean up your codebase and prevent duplicate code. The following guide will walk you through some of our recommended best practises for making the most out of this package.
+The following guide will walk you through some of our recommended best practises for making the most out of RTK Query Loader.
 
 <DocCardList />

docs/docs/examples.md

@@ -0,0 +1,152 @@
+---
+sidebar_position: 3
+---
+
+import TOCInline from "@theme/TOCInline";
+
+# Examples
+
+This page contains a collection of examples that cover typical use cases for the library.
+
+<TOCInline toc={toc} />
+
+## React Router (route loader)
+
+By utilizing `useParams` from `react-router-dom` we can create a loader that will load data based on the route parameters.
+
+```tsx
+import {
+  withLoader,
+  createLoader,
+} from "@ryfylke-react/rtk-query-loader";
+import { useParams, Redirect } from "react-router-dom";
+// ...
+
+const userRouteLoader = createLoader({
+  useQueries: () => {
+    const { userId } = useParams();
+    const userQuery = useGetUserQuery(userId, {
+      skip: userId ? false : true,
+    });
+
+    return {
+      queries: {
+        userQuery,
+      },
+    };
+  },
+  onLoading: (props) => {
+    const { userId } = useParams();
+    if (!userId) {
+      return <Redirect to="/users" />;
+    }
+    return <PageSkeleton />;
+  },
+  onError: (props, error) => <ErrorView error={error} />,
+});
+```
+
+## Reusable loader
+
+We can also create a reusable loader that can be used with multiple components.
+
+```tsx
+import {
+  withLoader,
+  createLoader,
+  ConsumerProps,
+} from "@ryfylke-react/rtk-query-loader";
+
+type UserLoaderProps = {
+  userId: string;
+};
+
+const userLoader = createLoader<UserLoaderProps>({
+  queriesArg: (props: UserLoaderProps) => props.userId,
+  useQueries: (userId) => {
+    const userQuery = useGetUserQuery(userId);
+
+    return {
+      queries: {
+        userQuery,
+      },
+    };
+  },
+  onLoading: (props) => <PageSkeleton />,
+  onError: (props, error) => <ErrorView error={error} />,
+});
+```
+
+You can now use the `userLoader` in any component whos props extend `UserLoaderProps`.
+
+### Consumer 1
+
+```tsx title="UserProfile.tsx"
+import { userLoader } from "../loaders";
+
+type UserProfileProps = {
+  userId: string;
+  // ... other props
+};
+
+export const UserProfile = withLoader(
+  (props: UserProfileProps, data) => {
+    return <>...</>;
+  },
+  userLoader
+);
+```
+
+### Consumer 2
+
+```tsx title="UserProfile.tsx"
+import { userLoader } from "../loaders";
+
+type InlineUserDetailsProps = {
+  userId: string;
+  dir: "row" | "column";
+  // ... other props
+};
+
+export const InlineUserDetails = withLoader(
+  (props: InlineUserDetailsProps, data) => {
+    return <>...</>;
+  },
+  userLoader
+);
+```
+
+## Stateful loader
+
+You can also create loaders that contain state.
+
+```tsx
+const loader = createLoader({
+  useQueries: () => {
+    const [name, setName] = useState("charizard");
+    const debouncedName = useDebounce(name, 200);
+    const pokemon = useGetPokemon(debouncedName);
+    return {
+      queries: {
+        pokemon,
+      },
+      payload: {
+        name,
+        setName,
+      },
+    };
+  },
+});
+
+const Consumer = withLoader((props, data) => {
+  return (
+    <div>
+      <input
+        value={data.payload.name}
+        onChange={(e) => data.payload.setName(e.target.value)}
+      />
+      <div>AP: {data.queries.pokemon.data.ability_power}</div>
+    </div>
+  );
+}, loader);
+```

docs/docs/examples.mdx

@@ -5,21 +5,27 @@ slug: /
 
 # RTK Query Loader
 
-Lets you create loaders for use with [RTK Query](https://redux-toolkit.js.org/rtk-query/overview).
+> Create _loaders_ for your React components.
 
-- [x] **Reusable**
-- [x] **Extendable**
-- [x] **Transformable**
-- [x] **Type-safe**
+🔗 **Extendable**
+💫 **Transformable**
+♻️ **Reusable**
+✅ **Properly typed**
+
+You write your components, as if the data has already loaded.
+
+## Install
 
 ```shell
 npm i @ryfylke-react/rtk-query-loader
 ```
 
-:::caution These docs are for version 1.0.0 and up
-If you are using version `0.3.51` or earlier, please refer to the [**migration guide**](./Migrations/v0.x).
-:::
+## Playground
 
-:::tip Getting Started
-Get started with our recommended best practises by following the [**Quick guide**](/Quick%20guide), or looking at a [simple example](./examples.md).
-:::
+<iframe 
+    src="https://codesandbox.io/embed/ryfylke-react-rtk-query-loader-demo-du3936?codemirror=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fpokemon%2FPokemon.tsx&theme=dark"
+    style={{width: "100%", height: 600, marginBottom: "1rem"}}
+    title="@ryfylke-react/rtk-query-loader Demo"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>

docs/docs/intro.md

@@ -4,43 +4,17 @@ sidebar_position: 2
 
 # What problem does this solve?
 
-Handling the loading and error state of components that depend on external data can be tedious,
-especially when there are multiple queries. It is also usually solved inconsistently throughout the project. Your options are essentially
-
-1. Return early (and show loading state)
-2. Deal with it in the JSX using conditional rendering, optional chaining, etc...
-
-If you are going for `2`, then you will also have to deal with the type being `T | undefined` in your component methods, which is a bummer.
-
-```tsx
-function Component(props){
-  const userQuery = useGetUser(props.id);
-  const postsQuery = userGetPostsByUser(userQuery.data?.id, {
-    skip: user?.data?.id === undefined,
-  });
-
-  if (userQuery.isError || postsQuery.isError){
-    // handle error
-  }
-
-  /* possible something like */
-  // if (userQuery.isLoading){ return (...) }
-
-  return (
-    <div>
-      {/* or checking if the type is undefined in the jsx */}
-      {(userQuery.isLoading || postsQuery.isLoading) && (...)}
-      {userQuery.data && postsQuery.data && (...)}
-    </div>
-  )
-}
-```
-
-What if we could instead "join" these queries into one, and then just return early if we are in the initial loading stage. That's basically the approach that rtk-query-loader takes. Some pros include:
-
-- [x] You get to isolate the data-loading code away from the presentational components
-- [x] Better type certainty
-- [x] Way less optional chaining in your components
-- [x] Reusability across multiple components
-- [x] Extendability
-- [x] Transform the output to any format you'd like.
+Handling the loading and error state of components that depend on external data can be very tedious,
+especially when you are managing multiple queries. RTK Query Loader aims to help you solve these issues by letting you create composable loaders that you can move out of the presentational components.
+
+- [x] Isolate the data-loading code away from the presentational components
+- [x] Increased type certainty
+  - 🔥 Way less optional chaining in your components
+  - 🔥 You write the components as if the data is already present
+- [x] Composability
+  - ♻️ Extend existing loaders
+  - ♻️ Overwrite only select properties
+- [x] Full control
+  - 🛠️ Loading/error states
+  - 🛠️ Custom loader-component
+  - 🛠️ Control defer behaviour

docs/docs/problem-solve.md

@@ -19,10 +19,12 @@
     "@docusaurus/preset-classic": "2.3.1",
     "@docusaurus/theme-search-algolia": "^2.3.1",
     "@mdx-js/react": "^1.6.22",
+    "@reduxjs/toolkit": "^1.9.3",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-redux": "^8.0.5"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.3.1",