@aspida/swrv

Getting Started

Installation

• Using npm:

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

• Using Yarn:

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

Make HTTP request from application

src/index.ts

<template>
  <div>
    <div v-if="error">failed to load</div>
    <div v-if="!data">loading...</div>
    <div v-else>hello {{ data.name }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'
import useAspidaSWRV from "@aspida/swrv"
import aspida from "@aspida/axios" // "@aspida/fetch", "@aspida/node-fetch"
import api from "../api/$api"

const client = api(aspida())

export default defineComponent({
  name: 'Profile',

  setup() {
    const { data, error } = useAspidaSWRV(
      client.user._userId(123),
      { query: { name: 'mario' } }
    )

    return { data, error }
  }
})
</script>

Get response body/status/headers

src/index.ts

<template>
  <div>
    <div v-if="error">failed to load</div>
    <div v-if="!data">loading...</div>
    <template v-else>
      <div>Status: {{ data.status }}</div>
      <div>Headers: {{ JSON.stringify(data.headers) }}</div>
      <div>Name: {{ data.body.name }}</div>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'
import useAspidaSWRV from "@aspida/swrv"
import aspida from "@aspida/axios" // "@aspida/fetch", "@aspida/node-fetch"
import api from "../api/$api"

const client = api(aspida())

export default defineComponent({
  name: 'Profile',

  setup() {
    const { data, error } = useAspidaSWRV(
      client.user._userId(123),
    'get',
      { query: { name: 'mario' } }
    )

    return { data, error }
  }
})
</script>

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

Use with SWRV options

src/index.ts

<template>
  <div>
    <div v-if="error">failed to load</div>
    <div v-if="!data">loading...</div>
    <div v-else>hello {{ data.name }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'
import useAspidaSWRV from "@aspida/swrv"
import aspida from "@aspida/axios" // "@aspida/fetch", "@aspida/node-fetch"
import api from "../api/$api"

const client = api(aspida())

export default defineComponent({
  name: 'Profile',

  setup() {
    const { data, error } = useAspidaSWRV(
      client.user._userId(123),
      {
        query: { name: 'mario' },
        revalidateDebounce: 0
      }
    )

    return { data, error }
  }
})
</script>

Conditional Fetching

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

const { data: user } = useAspidaSWRV(client.user)
const { data } = useAspidaSWRV(client.articles, { query: { userId: user?.id ?? 0 }, enabled: !!user })
// is an alias of 
const { data } = useSWRV(
  user ? [client.articles.$path({ query: { userId: user.id }}), '$get'] : null,
  () => client.articles.$get({ query: { userId: user.id }})
)

License

@aspida/swrv is licensed under a MIT License.