libvue/laravel-orion-api

A Laravel Orion compatible repository-based Javascript http-client powered by axios.

laravel-orion-api

A Laravel Orion compatible repository-based Javascript http-client powered by axios.

Install

> npm install --save @libvue/laravel-orion-api

Setup

Create a BaseRepository

// BaseRepository.js
import { LaravelOrionAPI } from "@libvue/laravel-orion-api";

class BaseRepository extends LaravelOrionAPI {
    constructor() {
        // If you want to use a custom axios config, use super(yourAxiosConfig), else just use super()
        super();
        this.baseURL = `${import.meta.env.VITE_API_DOMAIN}`;
        this.path = "";
    }
}

export default BaseRepository;

Extend from this BaseRepository

// PostRepository.js
import BaseRepository from "./BaseRepository.js";

class PostRepository extends BaseRepository {
    constructor() {
        super();
        this.path = "/posts";
    }
}

export default PostRepository;

Use it in different styles

By Creating an Instance

// app.js
import PostRepository from "PostRepository.js";
const PostRepositoryInstance = new PostRepository();

// Search some posts
PostRepositoryInstance.search({ limit: 10, sort: "-id" }).then((data) => {
    console.log(data);
});

By using a builder function

// app.js
import PostRepository from "PostRepository.js";

// Search some posts
PostRepository.make().search({ limit: 10, sort: "-id" }).then((data) => {
    console.log(data);
});

By Importing an instance

// app.js
import PostRepository from "PostRepository.js"; // Should use `export default new PostRepository()`;

// Search some posts
PostRepository.search({ limit: 10, sort: "-id" }).then((data) => {
    console.log(data);
});

Constructor Configuration

variable	default	description
baseURL	/	Sets the baseURL for that instance
path	''	Sets the relative path to the baseURL
autoAbort	true	Enables aborting ongoing requests for all methods inside the instance

Request Methods

instance method	http-method	parameters	Restricted data keys
index	GET	data	includes, aggregates
search	POST	data	page, limit, sort, filters, search, includes, aggregates
store	POST	data, multipart	-
show	GET	id, data	includes, aggregates
update	PATCH, PUT or POST	id, data, multipart, method = 'PATCH'	-
destroy	DELETE	id	-
restore	POST	id	-
batchStore	POST	data, multipart	-
batchUpdate	PATCH or POST	data	-
batchDestroy	DELETE	data	-
batchRestore	POST	data	-
indexRelation	GET	id, relation, data	includes, aggregates
searchRelation	POST	id, relation, data	page, limit, sort, filters, search, includes, aggregates
showRelation	GET	id, relation, relationId, data	includes, aggregates
storeRelation	POST	id, relation, data, multipart	-
updateRelation	PATCH or POST	id, relation, relationId, data, multipart	-
destroyRelation	DELETE	id, relation, relationId	-
restoreRelation	POST	id, relation, relationId	-
batchStoreRelation	POST	id, relation, data, multipart	-
batchUpdateRelation	PATCH or POST	id, relation, data, multipart	-
batchDestroyRelation	DELETE	id, relation, data	-
batchRestoreRelation	POST	id, relation, data	-
sync	PATCH	id, relation, data	-
toggle	PATCH	id, relation, data	-
attach	POST	id, relation, data	-
detach	DELETE	id, relation, data	-
pivot	PATCH	id, relation, relationId, data	-
associate	POST	id, relation, relatedKey	-
dissociate	DELETE	id, relation, relationId	-
abort	-	methodName OR custom id	-

Helper Methods

instance method	description
make	A builder function if you need to create an instance in the chain
withoutAutoAbort	If the instance has autoAbort enabled, you can disable this effect for methods that use this in the chain
withAutoAbort	If the instance has autoAbort disabled, you can enable this effect for methods that use this in the chain
withAbortId	Changes the default abort id (method name), so you can use Instance.abort(abortId) more precise.

In depth aborting

Default behaviour

By default autoAbort is set to true for the entire instance.

Note: This will only with work synchronous requests.

Example:

const UserRepositoryInstance = new UserRepository();

// First Call
UserRepositoryInstance.index().catch((e) => {
    console.log(e.code);                    // ERR_CANCELED
});
// Second call 
UserRepositoryInstance.index().catch((e) => {
    console.log(e.code);                    // ERR_CANCELED
});
// Third Call 
UserRepositoryInstance.index().then((result) => {
    console.log(result.status);             // 200
});

Disable autoAbort for entire instance

Disabling autoAbort will not auto-abort anything. Ongoing requests can still be canceled with the UserRepository.abort('method') or UserRepository.abort('id') methods.

Example:

class UserRepository extends LaravelOrionAPI {
    constructor(withDelay = false) {
        super();
        this.autoAbort = false;               // Disable autoAbort here
    }
}

const UserRepositoryInstance = new UserRepository();

// First Call 
UserRepositoryInstance.index().then((result) => {
    console.log(result.status)                // 200
});
// Second call 
UserRepositoryInstance.index().then((result) => {
    console.log(result.status)                // 200
});
// Third Call 
UserRepositoryInstance.index().then((result) => {
    console.log(result.status)                // 200
});

Disable autoAbort for a single method

Example:

const UserRepositoryInstance = new UserRepository();

// First Call
UserRepositoryInstance.withoutAutoAbort().index().then((result) => {
    console.log(result.status);             // 200
});
// Second call 
UserRepositoryInstance.withoutAutoAbort().index().then((result) => {
    console.log(result.status);             // 200
});
// Third Call 
UserRepositoryInstance.withoutAutoAbort().index().then((result) => {
    console.log(result.status);             // 200
});

Note: If you are using the index() for two different purposes simultaneously, you must use withAbortId() to avoid weird behaviour. See example below

Example:

// First Call
const UserRepositoryInstance = new UserRepository();

UserRepositoryInstance.withoutAutoAbort().index().then((result) => {
    console.log(result.status);             // 200
});
// Second call 
UserRepositoryInstance.withoutAutoAbort().index().then((result) => {
    console.log(result.status);             // 200
});
// Third Call 
UserRepositoryInstance.withAbortId('other-purpose').index().catch((e) => {
    console.log(e.code);                    // ERR_CANCELED 
});
// Fourth Call 
UserRepositoryInstance.withAbortId('other-purpose').index().then((result) => {
    console.log(result.status);             // 200 
});