docs: updated docs for v1

Author: imp-dance

docs/docs/Exports/create-loader.md

@@ -13,14 +13,22 @@ type ConsumerProps = Record<string, any> & {
 
 const loader = createLoader({
   queriesArg: (props: ConsumerProps) => props.userId,
-  queries: (userId) => {
-    return [useGetUser(userId)] as const;
+  useQueries: (userId) => {
+    return {
+      queries: {
+        user: useGetUser(userId),
+      },
+      deferredQueries: {
+        relations: useGetUserRelations(userId),
+      },
+      payload: {
+        // Lets you send any static data to your consumer
+        static: "data",
+      },
+    };
   },
-  deferredQueries: (userId) => {
-    return [useGetUserRelations(userId)] as const;
-  },
-  transform: (queries, deferredQueries) => ({
-    queries: [...queries, ...deferredQueries],
+  transform: (loaderData) => ({
+    ...loaderData,
     foo: "bar",
   }),
   onLoading: (props) => <div>Loading...</div>,
@@ -36,58 +44,3 @@ A `Loader` takes ownership over...
 - Data-loading
 - Data-transformation
 - Fetch-state rendering
-
-Here is the `createLoader` argument:
-
-````typescript
-type CreateLoaderArgs<
-  P extends unknown, // Props
-  QRU extends readonly UseQueryResult<unknown>[], // List of queries returned in `queries`
-  QRUD extends readonly UseQueryResult<unknown>[], // List of queries returned in `deferredQueries`
-  R extends unknown = MakeDataRequired<QRU>, // Return type
-  A = never // Loader argument
-> = {
-  /** Should return a list of RTK useQuery results.
-   * Example:
-   * ```typescript
-   * (args: Args) => [
-   *    useGetPokemonQuery(args.pokemonId),
-   *    useGetSomethingElse(args.someArg)
-   * ] as const
-   * ```
-   */
-  queries?: (...args: OptionalGenericArg<A>) => QRU;
-  /** Should return a list of RTK useQuery results.
-   * Example:
-   * ```typescript
-   * (args: Args) => [
-   *    useGetPokemonQuery(args.pokemonId),
-   *    useGetSomethingElse(args.someArg)
-   * ] as const
-   * ```
-   */
-  deferredQueries?: (...args: OptionalGenericArg<A>) => QRUD;
-  /** Transforms the output of the queries */
-  transform?: LoaderTransformFunction<QRU, QRUD, R>;
-  /** Generates an argument for the `queries` based on component props */
-  queriesArg?: (props: P) => A;
-  /** Determines what to render while loading (with no data to fallback on) */
-  onLoading?: (props: P) => ReactElement;
-  /** Determines what to render when query fails. */
-  onError?: (
-    props: P,
-    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
-  ) => ReactElement;
-  /** Determines what to render besides success-result while query is fetching. */
-  whileFetching?: WhileFetchingArgs<P, R>;
-  /** The component to use to switch between rendering the different query states. */
-  loaderComponent?: Component<CustomLoaderProps>;
-};
-```
-````

docs/docs/Exports/use-create-query.md

@@ -14,15 +14,24 @@ import {
   useCreateQuery,
 } from "@ryfylke-react/rtk-query-loader";
 
+const getUser = async (userId: string) => {
+  const res = await fetch(`users/${userId}`);
+  const json = await res.json();
+  return json as SomeDataType;
+};
+
 const loader = createLoader({
-  queries: (userId: string) => {
-    const query = useCreateQuery(async () => {
-      const res = await fetch(`users/${userId}`);
-      const json = await res.json();
-      return json as SomeDataType;
-      // dependency array
-    }, [userId]);
-    return [query] as const;
+  useQueries: (userId: string) => {
+    const query = useCreateQuery(
+      async () => await getUser(userId),
+      [userId]
+    );
+
+    return {
+      queries: {
+        query,
+      },
+    };
   },
 });
 ```

docs/docs/Features/defer-queries.md

@@ -8,21 +8,29 @@ Say you have a query that takes a long time to resolve. You want to put it in th
 
 ## Example
 
-```typescript {3-7}
+```typescript {3-13}
 const loader = createLoader({
-  queries: () => [useImportantQuery()] as const,
-  deferredQueries: () => [useSlowQuery()] as const,
-  transform: (queries, deferred) => ({
-    important: queries[0].data,
-    slow: deferred[0].data,
+  useQueries: () => {
+    const importantQuery = useImportantQuery();
+    const slowQuery = useSlowQuery();
+
+    return {
+      queries: {
+        importantQuery,
+      },
+      deferredQueries: {
+        slowQuery,
+      },
+    };
+  },
+  transform: (loader) => ({
+    important: loader.queries.importantQuery.data, // ImportantQueryResponse
+    slow: loader.deferredQueries.slowQuery.data, // SlowQueryResponse | undefined
   }),
 });
 ```
 
-Deferred queries are not automatically passed to the output of the loader, you have to use the `transform` argument (and it's second argument) to expose the queries for the consumers. The format of how you transform it is not important, but it is the only way to _get_ the deferred query result out of the loader.
-
 Deferred queries
 
 - Do not affect the loading state
-- Are only exposed through `transform`
 - Cause the component to rerender when fulfilled

docs/docs/Features/extending.md

@@ -12,18 +12,20 @@ const parentLoader = createLoader({
 });
 
 const childLoader = parentLoader.extend({
-    queries: () => [...] as const,
+    useQueries: () => ({...}),
 })
 ```
 
 It's worth mentioning that queries and transform are linked in this context, meaning that if you supply a new queries argument in the extended loader, but no transform, then you will not inherit the transform from the original loader.
 
-- Supplying just a new `queries` argument will result in transform being undefined in practise.
+- Supplying just a new `useQueries` argument will result in transform being undefined in practise.
 - Supplying just a new `transform` argument will result in the new transform being ignored.
-- Supplying a new `transform` and a new `queries` argument will properly overwrite the existing base properties.
+- Supplying a new `transform` and a new `useQueries` argument will properly overwrite the existing base properties.
 
 All other properties in the loader will overwrite as expected. You can, for example, just supply a new `onLoading`, or `onError`.
 
+`.extend` will not merge two separate `useQueries` properties. For example, you cannot _just_ inherit the deferredQueries, you must either inherit all or none of the `useQueries` argument.
+
 :::info
 You may extend _extended_ loaders, to create an inheritance model.
 :::

docs/docs/Features/transforming.md

@@ -8,17 +8,21 @@ You can transform the queries to any format you'd like.
 
 ```ts
 const notTransformed = createLoader({
-  queries: () => [useGetPokemonsQuery()],
+  useQueries: () => ({
+    queries: { pokemons: useGetPokemonsQuery() },
+  }),
 });
 
 type NotTransformedData = InferLoaderData<typeof notTransformed>;
-// readonly [UseQueryResults<Pokemon[]>]
+// { queries: { pokemons: UseQueryResult<Pokemon[]> } }
 
 const transformed = createLoader({
-  queries: () => [useGetPokemonsQuery()],
-  transform: (queries) => ({
-    results: queries[0].data,
-    query: queries[0],
+  useQueries: () => ({
+    queries: { pokemons: useGetPokemonsQuery() },
+  }),
+  transform: (loader) => ({
+    results: loader.queries.pokemons.data,
+    query: loader.queries.pokemons,
   }),
 });
 

docs/docs/Quick Guide/add-queries.md

@@ -6,36 +6,46 @@ sidebar_position: 3
 
 You can now start to add queries to your extended loaders.
 
-The `queries` argument of [createLoader](/Exports/create-loader) is a _hook_, which means that [the rules of hooks](https://reactjs.org/docs/hooks-rules.html) apply. This gives you the super-power of utilizing other hooks inside of your loader.
+The `useQueries` argument of [createLoader](/Exports/create-loader) is a _hook_, which means that [the rules of hooks](https://reactjs.org/docs/hooks-rules.html) apply. This gives you the super-power of utilizing other hooks inside of your loader.
 
-```tsx title="/src/loaders/userRouteLoader.tsx" {6-10}
+```tsx title="/src/loaders/userRouteLoader.tsx" {6-15}
 import { baseLoader } from "./baseLoader";
 // ...
 
 export const userRouteLoader = baseLoader.extend({
-  queries: () => {
+  useQueries: () => {
     const { userId } = useParams();
     const user = useGetUserQuery(userId);
     const posts = useGetPostsByUser(userId);
 
-    return [user, posts] as const;
+    return {
+      queries: {
+        user,
+        posts,
+      },
+    };
   },
 });
 ```
 
-The hook should return a `readonly array` of the `useQuery` results. This means that in typescript, you need to specify `as const` after the array.
+You can add as many queries as you'd like to `Response.queries`, and they will all aggregate to a common loading state.
 
 ## Accepting arguments
 
 If you want the loader to take an argument, you can do that.
 
 ```tsx {2}
 export const userRouteLoader = baseLoader.extend({
-  queries: (userId: string) => {
+  useQueries: (userId: string) => {
     const user = useGetUserQuery(userId);
     const posts = useGetPostsByUser(userId);
 
-    return [user, posts] as const;
+    return {
+      queries: {
+        user,
+        posts,
+      },
+    };
   },
 });
 ```
@@ -58,25 +68,30 @@ type UserRouteLoaderProps = Record<string, any> & {
 export const userRouteLoader = baseLoader.extend({
   queriesArg: (props: UserRouteLoaderProps) => props.userId,
   // type is now inferred from queriesArg return
-  queries: (userId) => {
+  useQueries: (userId) => {
     const user = useGetUserQuery(userId);
     const posts = useGetPostsByUser(userId);
 
-    return [user, posts] as const;
+    return {
+      queries: {
+        user,
+        posts,
+      },
+    };
   },
 });
 ```
 
 A component consuming this loader would pass the argument automatically through this pipeline:
 
 ```typescript
-// props → queriesArg → queries
-loaderArgs.queries(queriesArg(consumerProps));
+// props → queriesArg → useQueries
+loaderArgs.useQueries(queriesArg(consumerProps));
 ```
 
 ```typescript
 <UserRoute userId="1234" />
 // → queriesArg({ userId: "1234" })
 // → "1234"
-// → loader.queries("1234")
+// → loader.useQueries("1234")
 ```

docs/docs/Quick Guide/consume-loader.mdx

@@ -14,25 +14,29 @@ A convenient wrapper that ensures that the component is only rendered when it ha
 
 This is definitely the preferred and optimal way to consume the loaders.
 
-```tsx {8-22}
+```tsx {8-26}
 import { withLoader } from "@ryfylke-react/rtk-query-loader";
 import { userRouteLoader } from "../loaders/baseLoader";
 
 type Props = {
   /* ... */
 };
 
-export const UserRoute = withLoader((props: Props, queries) => {
+export const UserRoute = withLoader((props: Props, loader) => {
   // `queries` is typed correctly, and ensured to have loaded.
-  const user = queries[0].data;
-  const posts = queries[1].data;
+  const {
+    user,
+    posts
+  } = loader.queries;
+
   return (
     <article>
       <header>
-        <h2>{user.name}</h2>
+        <h2>{user.data.name}</h2>
+        {user.isFetching || posts.isFetching ? (<InlineLoading />) : null}
       </header>
       <main>
-        {posts.map((post) => (...))}
+        {posts.data.map((post) => (...))}
       </main>
     </article>
   );

docs/docs/examples.md

@@ -4,7 +4,7 @@ sidebar_position: 3
 
 # Simple example
 
-```tsx {10-19,22-31}
+```tsx {10-23,26-35}
 import {
   withLoader,
   createLoader,
@@ -15,20 +15,24 @@ import { ErrorView } from "../components/ErrorView";
 
 // Create a loader
 const userRouteLoader = createLoader({
-  queries: () => {
+  useQueries: () => {
     const { userId } = useParams();
     const userQuery = useGetUserQuery(userId);
 
-    return [userQuery] as const; // important
+    return {
+      queries: {
+        userQuery,
+      },
+    };
   },
   onLoading: (props) => <div>Loading...</div>,
   onError: (props, error) => <ErrorView error={error} />,
 });
 
 // Consume the loader
-const UserRoute = withLoader((props: {}, queries) => {
+const UserRoute = withLoader((props, loader) => {
   // Queries have successfully loaded
-  const user = queries[0].data;
+  const user = loader.queries.userQuery.data;
 
   return (
     <div>