vue-axillo

Composable Axios for REST API with query notation GraphQL

Why?

Axillo is a set of tools effort to help you use REST API in your apps. It's well known for its client and its server.

All queries use rexios utils normalize url, data, params for axios when using REST API request

Install

$ npm install vue-axillo

Note: This project is compatible with node v10+

Usage

Query

For query requests the get method is used by default

import axillo  from 'vue-axillo';

export default {
  setup() {
    const { 
      query,        // query method
      loading,      // request status
      result: users // reactive data
    } = axillo({
      baseURL: 'v2/api/user/'
    });

    async function submit() {
      await query(/* params */); // => request on 'v2/api/user/'
    }

    return {
      submit,
      loading,
      users,
    }
  }
}

Query with params

import axillo  from 'vue-axillo';

export default {
  setup() {
    const { 
      query,        // query method
      loading,      // request status
      result: users // reactive data
    } = axillo({
      baseURL: 'v2/api/user/'
    });

    async function submit() {
      await query({
        id: 123,
        article: 1,
      }); // => request on 'v2/api/user/123/?article=1'
    }

    return {
      submit,
      loading,
      users,
    }
  }
}

Query with reactive params

import axillo  from 'vue-axillo';
import { ref, watch } from 'vue' // vue 3 or composition-api

export default {
  setup() {
    const name = ref(null);
    const { 
      params: searchByName, // params for query
      loading,              // request status
      result: users         // reactive data
    } = axillo({
      baseURL: 'v2/api/user/'
    });

    watch(name, value => {
      searchByName.value = value;
    });

    return {
      loading,
      users,
    }
  }
}

Mutate

For mutate requests the post method is used by default

import axillo  from 'vue-axillo';

export default {
  setup() {
    const { 
      mutate,   // mutate method
      loading,  // request status
      onDone,   // suceess callback
      onError,  // error callback
    } = axillo({
      baseURL: 'v2/api/user/'
    });

    function submit() {
      mutate({
        name: 'Scrum'
      });
    }

    onDone(response) {
      console.log(`User ${response.name} created.`);
    }

    return {
      submit,
      loading,
    }
  }
}

Options

baseURL

Type: String required
Default: null
Description: URL api used at query mutation

method

Type: String
Default: get|post
Description: for query requests the get method is used by default, for mutate requests the post method is used by default

apiClient

Type: Function
Default: Axios
Description: HTTP client