Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scrum/vue-axillo
Composable Axios for REST API with query notation GraphQL
https://github.com/scrum/vue-axillo
axios composable graphql rest-api vuejs
Last synced: about 1 month ago
JSON representation
Composable Axios for REST API with query notation GraphQL
- Host: GitHub
- URL: https://github.com/scrum/vue-axillo
- Owner: Scrum
- License: mit
- Created: 2020-09-25T13:41:40.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-11-11T07:05:02.000Z (about 3 years ago)
- Last Synced: 2024-10-05T14:13:24.326Z (about 1 month ago)
- Topics: axios, composable, graphql, rest-api, vuejs
- Language: JavaScript
- Homepage:
- Size: 150 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- Funding: .github/funding.yml
- License: license
Awesome Lists containing this project
README
# vue-axillo
> Composable [Axios](https://github.com/axios/axios) for [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) API with query notation [GraphQL](https://graphql.org/)
[](https://github.com/Scrum/vue-axillo/actions?query=workflow%3A%22CI+tests%22)[]()[](https://www.npmjs.com/package/vue-axillo)[](https://github.com/xojs/xo)[](https://coveralls.io/r/Scrum/vue-axillo)
[](https://www.npmjs.com/package/vue-axillo)[](https://www.npmjs.com/package/vue-axillo)
## Why?
Axillo is a set of tools effort to help you use [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) API in your apps. It's well known for its client and its server.
All queries use [rexios](https://github.com/Scrum/rexios) utils normalize url, data, params for axios when using [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) API request
## Install
```bash
$ npm install vue-axillo
```
> **Note:** This project is compatible with node v10+
## Usage
### Query
> For `query` requests the `get` method is used by default
```js
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
```js
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
```js
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
```js
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](https://github.com/axios/axios)
Description: *HTTP client*