@aspida/swrv NPM

@aspida/swrv

Getting Started

Installation

Using npm:

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

Using Yarn:

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

Make HTTP request from application

src/index.vue

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

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

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

Dependent Fetching

const { data: user } = useAspidaSWRV(client.user);
const { data } = useAspidaSWRV(() => user.value && client.articles, {
  query: { userId: user?.id ?? 0 },
});