---
sidebar_position: 4
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

# Consume the loader

<Tabs groupId="method" queryString>
  <Tab label="Using withLoader" value="withLoader" default>

A convenient wrapper that ensures that the component is only rendered when it has data.

This is definitely the preferred and optimal way to consume the loaders.

```tsx {8-26}
import { withLoader } from "@ryfylke-react/rtk-query-loader";
import { userRouteLoader } from "../loaders/baseLoader";

type Props = {
  /* ... */
};

export const UserRoute = withLoader((props: Props, loader) => {
  // `queries` is typed correctly, and ensured to have loaded.
  const {
    user,
    posts
  } = loader.queries;

  return (
    <article>
      <header>
        <h2>{user.data.name}</h2>
        {user.isFetching || posts.isFetching ? (<InlineLoading />) : null}
      </header>
      <main>
        {posts.data.map((post) => (...))}
      </main>
    </article>
  );
}, userRouteLoader);
```

  </Tab>
  <Tab label="Using useLoader" value="useLoader" default>

Every `Loader` contains an actual hook that you can call to run all the queries and aggregate their statuses as if they were just one joined query.

```tsx {3,9}
import { userRouteLoader } from "./baseLoader";

const useLoaderData = userRouteLoader.useLoader;

type Props = {
  /* ... */
};
const UserRoute = (props: Props) => {
  const loaderQuery = useLoaderData();

  if (loaderQuery.isLoading) {
    // ...
  }

  if (loaderQuery.isError) {
    // ...
  }
  // ...
};
```

  </Tab>
</Tabs>
