vue-rest-resource

A base class for accessing REST APIs in object-oriented way. Backed by axios.

Installation

Add package

yarn add vue-rest-resource

Usage

Import Resource class and instantiate with endpoint URL:

import Resource from 'vue-rest-resource';

const usersResource = new Resource('/api/users');

// use any of provided methods:
const user = await usersResource.get(1);

// create user
await usersResource.create(userData);

// update user
await usersResource.partialUpdate(userId, userData);

Global settings

You may set global options to Resource class:

Change axios client instance

by default, Resource class creates a new instance of axios. You still able to override it by:

import Resource from 'vue-rest-resource';
import axios from 'axios';

const myAxios = axios.create();
Resource.client = myAxios;

Force trailing slash

some framworks (eg. Django) may require a trailing slash for requests. appendSlash setting ensures this rule.

import Resource from 'vue-rest-resource';
import axios from 'axios';

Resource.appendSlash = true;

Override global setting instance

const resource = new Resource('/api');
resource.withClient(myAxios);
resource.withAppendSlash(false);

resource.create();

latter calls localhost:8000/api using myAxios client.

Extend with own methods

Extend class and implement your own custom actions:

class UsersResource extends Resource {
    async setActive(userId, flag) {
        const url = this.url(userId);
        return this.update(url, {isActive: flag})
    }
    
    async setStatus(userId, status) {
        // access underlying client API
        const url = this.url(userId);
        return Resource.client.post(url, status)
    }
}

// instantiate and use
const users = new UsersResource('/api/users');
users.setActive(100, true)

Helper methods

Make an URL with url(...args): string

Use Resource.url functions to build an URL:

// in some resource class method
// assuming: appendSlash = true, userId = 10
this.url(['users', userId, 'create']) 
// /users/10/create/

Class method to REST action map

| Method | REST
| ------------------- |:-------------:| | get(objectId) | GET | list() | GET | create(data) | POST | delete(objectId) | DELETE | update(objectId, data) | PUT | partialUpdate(objectId, data) | PATCH | createOrUpdate(objectId, data) | PUT or POST | If id in data, calls update otherwise create | createOrPartialUpdate(objectId, data) | PATCH or POST | If id in data, calls partialUpdateotherwisecreate