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

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...

Simple

// 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);

Keys with Parameters

// 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.

// 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.