# @aspida/swr

<br />
<img src="https://aspida.github.io/aspida/logos/png/logo.png" alt="aspida" title="aspida" />
<div align="center">
  <a href="https://www.npmjs.com/package/@aspida/swr">
    <img src="https://img.shields.io/npm/v/@aspida/swr" alt="npm version" />
  </a>
  <a href="https://www.npmjs.com/package/@aspida/swr">
    <img src="https://img.shields.io/npm/dm/@aspida/swr" alt="npm download" />
  </a>
</div>
<br />
<div align="center"><a href="https://swr.vercel.app/">SWR (React Hooks)</a> wrapper for <a href="https://github.com/aspida/aspida/">aspida</a>.</div>
<br />
<br />

## Getting Started

### Installation

- Using [npm](https://www.npmjs.com/):

  ```sh
  $ npm install aspida @aspida/swr @aspida/axios swr axios
  # $ npm install aspida @aspida/swr @aspida/fetch swr
  # $ npm install aspida @aspida/swr @aspida/node-fetch swr node-fetch
  ```

- Using [Yarn](https://yarnpkg.com/):

  ```sh
  $ yarn add aspida @aspida/swr @aspida/axios swr axios
  # $ yarn add aspida @aspida/swr @aspida/fetch swr
  # $ yarn add aspida @aspida/swr @aspida/node-fetch swr node-fetch
  ```

### Make HTTP request from application

`src/index.ts`

```tsx
import aspida from "@aspida/axios"; // "@aspida/fetch", "@aspida/node-fetch"
import useAspidaSWR from "@aspida/swr";
import api from "../api/$api";

const client = api(aspida());

function Profile() {
  const { data, error } = useAspidaSWR(client.user._userId(123), { query: { name: "mario" } });

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}
```

### Get response body/status/headers

`src/index.ts`

```tsx
import aspida from "@aspida/axios"; // "@aspida/fetch", "@aspida/node-fetch"
import useAspidaSWR from "@aspida/swr";
import api from "../api/$api";

const client = api(aspida());

function Profile() {
  const { data, error } = useAspidaSWR(client.user._userId(123), "get", {
    query: { name: "mario" },
  });

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return (
    <>
      <div>Status: {data.status}</div>
      <div>Headers: {JSON.stringify(data.headers)}</div>
      <div>Name: {data.body.name}</div>
    </>
  );
}
```

`useAspidaSWR(client.user._userId(123), { query })` is an alias of `useAspidaSWR(client.user._userId(123), "$get", { query })`

### Use with SWR options

`src/index.ts`

```tsx
import aspida from "@aspida/axios"; // "@aspida/fetch", "@aspida/node-fetch"
import useAspidaSWR from "@aspida/swr";
import api from "../api/$api";

const client = api(aspida());

function Profile() {
  const { data, error } = useAspidaSWR(client.user._userId(123), {
    query: { name: "mario" },
    revalidateOnMount: true,
    initialData: { name: "anonymous" },
  });

  if (error) return <div>failed to load</div>;
  return <div>hello {data.name}!</div>;
}
```

### Conditional Fetching

If you use the `enabled = false` option, AspidaSWR will not start the request.

```ts
const { data: user } = useAspidaSWR(client.user);
const { data } = useAspidaSWR(client.articles, {
  query: { userId: user?.id ?? 0 },
  enabled: !!user,
});
// is an alias of
const { data } = useSWR(
  user ? [client.articles.$path({ query: { userId: user.id } }), "$get"] : null,
  () => client.articles.$get({ query: { userId: user.id } })
);
```

## License

@aspida/swr is licensed under a [MIT License](https://github.com/aspida/aspida/blob/master/packages/aspida-swr/LICENSE).