1.0.6 • Published 2 years ago
vuex-rql v1.0.6
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}}
]
})