Vuex-rest

A powerful utility to simplify consumption of rest apis using RQL.

Setup

Place the following code in your store/index.ts

import {JWTAuth} from "vuex-rql";

const baseUrl = <string>process.env.VUE_APP_API_ENDPOINT
import app from 'vuex-rql'

app.configureAxios(baseUrl).configureAuth(new JWTAuth({
	path: baseUrl + '/authentication/',
	refreshPath: baseUrl + '/authentication/refresh/',
	storage: localStorage
}))

Usage

Create the users service

// store/services/user.ts

import {BaseModel, Service} from "vuex-rql";
import {Module} from "vuex-module-decorators";

export interface User extends BaseModel {
	email: string
	first_name: string
	last_name: string
}

@Module({name: 'users', namespaced: true})
export default class UserService extends Service<User> {
	path = 'users/'
}

Create the authentication service

// store/auth.ts

import {BaseAuthService} from "vue-rql";
import {User} from "@/store/services/user";
import {Module} from "vuex-module-decorators";

@Module({name: 'auth', namespaced: true})
export default class AuthService extends BaseAuthService<User> {
}

And finally connect everything to the store

interface RootState {
	users: ServiceState<User>,
}

const store = new Vuex.Store<RootState>({
	mutations: {},
	actions: {},
	modules: {
		'auth': AuthService,
		'users': UserService,
	}
})

export const usersService = getModule(UserService, store)
export const authService = getModule(AuthService, store)

You can now import it in your vue component and use in the following fashion

import {usersService} from '@/store'

usersService.find().then(data => {
	// do stuff
})

const data = usersService.findStore({}).results // acess data from store

Extending to include custom code

import app, {FindResponse} from "vuex-rql";

@Module({name: 'users', namespaced: true})
class CustomService extends Service<CustomType> {
	path = 'users/'

	@Action({rawError: true})
	async find(query?: Query<CustomType>): Promise<FindResponse<ModelType>> {
		let params: Query<CustomType> = Object.assign({}, query || {})
		this.context.commit('setFindState', true)
		return app.axios.get(this.path, {params}).then((response: AxiosResponse<FindResponse<ModelType>>) => {
			this.context.commit('setData', response.data)
			return response.data
		}).catch(e => {
			return Promise.reject(e)
		}).finally(() => {
			this.context.commit('setFindState', false)
		})
	}
}

Querying

$eq

Find users with name John:

usersService.findStore({name: 'John'})

or

usersService.findStore({name: {$eq: 'John'}})

$gt, $lt, $le, $ge

Find users between ages 18 and 65 inclusive

usersService.findStore({age: {$ge: 18, $le: 65}})

or exclusive

usersService.findStore({age: {$gt: 18, $lt: 65}})

$select

Return specific fields

usersService.findStore({$select: ['name', 'age']})

$like

Search for users with name John

usersService.findStore({name: {$like: 'John'}})

$ilike

Search for users with name John (case in-sensitive):

usersService.findStore({name: {$ilike: 'john'}})

$in, $out

Search for users where the property does ($in) or does not ($out) match any of the given values:

usersService.findStore({roleId: {$in: [2, 5]}})

or

usersService.findStore({roleId: {$out: [2, 5]}})

$or

Combine multiple queries using logical OR

usersService.findStore({
	$or: [
		{age: {$gt: 18, $lt: 65}},
		{active: {$eq: true}}
	]
})