Aspida-SWR Adapter


Just one function, which adapt

- api definition generated by aspida
- to hooks provided by @vercel/swr

This enables Conditional or Depentent Fetching in easy, DRY, and null-safe way.

---

This library doesn't have dependency on SWR.

However, if you use SWR, we recommend you to use ver 2.x

Install

``
npm i aspida-swr-adapter
`

Quick Start

This library has only one API

`plaintext
aspidaToSWR(api, method, extra, (fn, extra, ...params) => ..);
`

whose return values [getKey, fetcher] (in tuple) are ready to pass to useSWR, useSWRInfinite, and useSWRImmutable.

For example...

$3

`tsx
// GET ${basePath}/users/{userId}&token=xyz

// userId: number | undefined
// token: string | undefined

const args = aspidaToSWR(
userId !== undefined && apiClient.users._userId(userId),
"$get",
isValidToken(token) && { token },
(fn, { token }) => fn( query: { token } )
);

const { data } = useSWR(...args);
`

$3

`tsx
// GET ${basePath}/users/{userId}/posts?page=2&token=xyz

// userId: number | undefined
// token: string | undefined

const [getKey, fetcher] = aspidaToSWR(
userId !== undefined &&
apiClient.users._userId(userId).posts,
"$get",
isValidToken(token) && { token },
(fn, { token }, page: number) => fn({ query: { token, page } })
);

const { data: pagesData, setSize } = useSWRInfinite(
(pageIndex) => getKey(pageIndex),
fetcher,
{ initialSize: 2 }
);

`

Let's take a closer look.

`tsx
// userId: number | undefined
// token: string | undefined

const [getKey, fetcher] = aspidaToSWR(
// api: Api inferred from value (if falsy, SWR will not start request)
userId !== undefined &&
apiClient.users._userId(userId).posts,
// method: declared method in Api
"$get",
// extra: any, inferred from value (if falsy, SWR will not start request)
// If nothing needed, pass [] or {} (or some truthy value) explicitly
// , otherwise SWR will not start request.
isValidToken(token) &&
{ token },
// fetchFn: how to fetch data using
// - extra ({ token: string })
// - variadic ...params (...[page: number])
// where fn is apiClient.users._userId(userId).posts.$get
(fn, { token }, page: number) => fn({ query: { token, page } })
// getKey to be (page: number) => keys ... inferred from the type annotation.
);

const { data: pagesData, setSize } = useSWRInfinite(
(pageIndex) => getKey(pageIndex),
fetcher,
{ initialSize: 2 }
);

`

Examples

In examples/next-swr` subproject, You can find some example code (using Next.js) like below.