@aspida/swr

@aspida/swr

SWR (React Hooks) wrapper for aspida.

Getting Started

Installation

• Using npm:

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

• Using Yarn:

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

Make HTTP request from application

src/index.ts

import useAspidaSWR from "@aspida/swr"
import aspida from "@aspida/axios" // "@aspida/fetch", "@aspida/node-fetch"
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 useAspidaSWR from "@aspida/swr"
import aspida from "@aspida/axios" // "@aspida/fetch", "@aspida/node-fetch"
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 useAspidaSWR from "@aspida/swr"
import aspida from "@aspida/axios" // "@aspida/fetch", "@aspida/node-fetch"
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.