ryfylke-react-as · imp-dance · Feb 12, 2023 · Feb 12, 2023
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
diff --git a/docs/babel.config.js b/docs/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};
diff --git a/docs/blog/2019-05-28-first-blog-post.md b/docs/blog/2019-05-28-first-blog-post.md
@@ -0,0 +1,12 @@
+---
+slug: first-blog-post
+title: First Blog Post
+authors:
+  name: Gao Wei
+  title: Docusaurus Core Team
+  url: https://github.com/wgao19
+  image_url: https://github.com/wgao19.png
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
diff --git a/docs/blog/2019-05-29-long-blog-post.md b/docs/blog/2019-05-29-long-blog-post.md
@@ -0,0 +1,44 @@
+---
+slug: long-blog-post
+title: Long Blog Post
+authors: endi
+tags: [hello, docusaurus]
+---
+
+This is the summary of a very long blog post,
+
+Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
+
+<!--truncate-->
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
diff --git a/docs/blog/2021-08-01-mdx-blog-post.mdx b/docs/blog/2021-08-01-mdx-blog-post.mdx
@@ -0,0 +1,20 @@
+---
+slug: mdx-blog-post
+title: MDX Blog Post
+authors: [slorber]
+tags: [docusaurus]
+---
+
+Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
+
+:::tip
+
+Use the power of React to create interactive blog posts.
+
+```js
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+```
+
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+
+:::
diff --git a/docs/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg b/docs/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg
diff --git a/docs/blog/2021-08-26-welcome/index.md b/docs/blog/2021-08-26-welcome/index.md
@@ -0,0 +1,25 @@
+---
+slug: welcome
+title: Welcome
+authors: [slorber, yangshun]
+tags: [facebook, hello, docusaurus]
+---
+
+[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
+
+Simply add Markdown files (or folders) to the `blog` directory.
+
+Regular blog authors can be added to `authors.yml`.
+
+The blog post date can be extracted from filenames, such as:
+
+- `2019-05-30-welcome.md`
+- `2019-05-30-welcome/index.md`
+
+A blog post folder can be convenient to co-locate blog post images:
+
+![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
+
+The blog supports tags as well!
+
+**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
diff --git a/docs/blog/authors.yml b/docs/blog/authors.yml
@@ -0,0 +1,17 @@
+endi:
+  name: Endilie Yacop Sucipto
+  title: Maintainer of Docusaurus
+  url: https://github.com/endiliey
+  image_url: https://github.com/endiliey.png
+
+yangshun:
+  name: Yangshun Tay
+  title: Front End Engineer @ Facebook
+  url: https://github.com/yangshun
+  image_url: https://github.com/yangshun.png
+
+slorber:
+  name: Sébastien Lorber
+  title: Docusaurus maintainer
+  url: https://sebastienlorber.com
+  image_url: https://github.com/slorber.png
diff --git a/docs/docs/Exports/create-loader.md b/docs/docs/Exports/create-loader.md
@@ -0,0 +1,64 @@
+---
+sidebar_position: 1
+---
+
+# createLoader
+
+Creates a `Loader`.
+
+Takes the following 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>;
+};
+```
+````
+
+oaijsdfoij
diff --git a/docs/docs/Exports/index.md b/docs/docs/Exports/index.md
@@ -0,0 +1,9 @@
+---
+sidebar_position: 4
+---
+
+# Exports
+
+Describes the different exports and their related types.
+
+All the types can be found [here](https://github.com/ryfylke-react-as/rtk-query-loader/blob/main/src/types.ts).
diff --git a/docs/docs/Exports/infer-loader-data.md b/docs/docs/Exports/infer-loader-data.md
@@ -0,0 +1,18 @@
+---
+sidebar_position: 3
+---
+
+# InferLoaderData
+
+Returns the return type of a given `Loader`:
+
+```typescript
+import {
+    createLoader,
+    InferLoaderData,
+} from "@ryfylke-react/rtk-query-loader";
+
+const loader = createLoader({...});
+
+type LoaderData = InferLoaderData<typeof loader>;
+```
diff --git a/docs/docs/Exports/with-loader.md b/docs/docs/Exports/with-loader.md
@@ -0,0 +1,23 @@
+---
+sidebar_position: 1
+---
+
+# withLoader
+
+Consumes a `Loader`.
+
+Takes two arguments:
+
+```typescript
+type Argument1 = (props: P, loaderData: R) => ReactElement;
+type Argument2 = Loader; // Return type of `createLoader`
+```
+
+Example:
+
+```tsx
+const Component = withLoader(
+  (props, queries) => <div />,
+  createLoader({})
+);
+```
diff --git a/docs/docs/Quick Guide/add-queries.md b/docs/docs/Quick Guide/add-queries.md
@@ -0,0 +1,60 @@
+---
+sidebar_position: 3
+---
+
+# Add queries
+
+You can now start to add queries to your extended loaders.
+
+```tsx title="/src/loaders/userRouteLoader.tsx" {6-10}
+import { baseLoader } from "./baseLoader";
+// ...
+
+export const userRouteLoader = baseLoader.extend({
+  queries: () => {
+    const { userId } = useParams();
+    const user = useGetUserQuery(userId);
+    const posts = useGetPostsByUser(userId);
+
+    return [user, posts] as const;
+  },
+});
+```
+
+As you can see, the `queries` argument is technically a hook. This means that you can run other hooks inside of it.
+
+## 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) => {
+    const user = useGetUserQuery(userId);
+    const posts = useGetPostsByUser(userId);
+
+    return [user, posts] as const;
+  },
+});
+```
+
+**If you want to consume this loader through `withLoader`, you need to add the `queriesArg` argument**.
+
+This argument transforms the consumer's props to the queries argument.
+
+```tsx {7-8}
+// Matches any component that accepts a prop `userId` which is a `string`.
+type UserRouteLoaderProps = Record<string, any> & {
+  userId: string;
+};
+
+export const userRouteLoader = baseLoader.extend({
+  queriesArg: (props: UserRouteLoaderProps) => props.userId,
+  queries: (userId) => {
+    const user = useGetUserQuery(userId);
+    const posts = useGetPostsByUser(userId);
+
+    return [user, posts] as const;
+  },
+});
+```
diff --git a/docs/docs/Quick Guide/base-loader.md b/docs/docs/Quick Guide/base-loader.md
@@ -0,0 +1,22 @@
+---
+sidebar_position: 1
+---
+
+# Create a base loader
+
+A `Loader` can control the loading, fetch and error state views for consumer components.
+
+> Use a base loader to create sensible "fallback"/"default"-states for consumer components.
+
+```tsx title="/src/loaders/baseLoader.tsx" {7-20}
+import {
+  createLoader,
+  withLoader,
+} from "@ryfylke-react/rtk-query-loader";
+import { Loading, GenericErrorView } from "../components/common";
+
+export const baseLoader = createLoader({
+  onLoading: () => <Loading />,
+  onError: (props, error) => <GenericErrorView error={error} />,
+});
+```