Composable Axios for REST API with query notation GraphQL
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
$ npm install vue-axillo
Note: This project is compatible with node v10+
For
query
requests theget
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,
}
}
}
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,
}
}
}
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,
}
}
}
For
mutate
requests thepost
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,
}
}
}
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
Author: Scrum
Source Code: https://github.com/Scrum/vue-axillo
#vue #vuejs #javascript