@aspida/swr
v1.14.0
Published
SWR wrapper for aspida
Downloads
33,795
Readme
@aspida/swr
Getting Started
Installation
Using npm:
$ 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:
$ 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
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
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
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.
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.