Vuex-jsonapi-client NPM

A rest client that follow the jsonapi specificaccion

Status (alpha)

The library was created by refactoring the CMC project. The refactoring is still in progress.

Actions

get(url): Makes a get ajax request. The entries returned by the request are stored in vuex.

NOTICE: The ajax request/response is cached. To avoid that the response is cached, use get({ url, cache: false })

import { Utils } from 'vuex-jsonapi-client'
...
data () {
  return {
    ticketRefs = []
  }
}
async mounted () {
  response = await this.$store.dispatch('get', 'www.example.com/api/tickets')
  ticketRefs = Utils.entryArrayToRef(response.data)
}
computed: {
  tickets () {
    return ticketRefs.map(ref => {
      return this.$store.entry(ref)
    })
  }
}

create({ resource, payload }): Ajax POST request. The result is stored in vuex.

this.$store.create({
  resource: 'www.example.com/api/v1/users', // or just 'users' when endpoint is set
  payload: {
    attributes: {
      firstname: 'Lara'
    }
  }
})

update({ entry, payload }): Ajax PUT call. It merge, the passed payload, with the entry and stored it to vuex, before making the ajax request.

const user = {
  id: '1',
  type: 'users',
  links: {
    self: '/api/v1/users/1'
  }
}

this.$store.update({
  entry: user,
  payload: {
    attributes: {
      firstname: 'Lara'
    }
  }
})

createOrUpdate({ resource, entry, payload }): Create or update the resource depending if it exists or not. If the entry is not null, then it requires that the entry has the field: links.self

this.$store.createOrUpdate({
  resource: 'www.example.com/api/v1/users', // or just 'users' when endpoint is set
  entry: this.$store.getters.entry({ id: '1', 'users' }),
  payload: {
    attributes: {
      firstname: 'Lara'
    }
  }
})

destroy({ entry }): Ajax DELETE request. It remove the entry from vuex before making the request.

const user = {
  id: '1',
  type: 'users',
  links: {
    self: '/api/v1/users/1'
  }
}
this.$store.destroy(user)

this.$store.destroy('/api/v1/users/1')

loadRelationship({ entry, name }): check if all entries in a relationship are
```
const user = {
  id: '1',
  type: 'users',
  relationships: {
    projects: {
      ...
      links: {
        self: '/api/v1/users/1/projects'
      }
    }
  }
}
this.$store.loadRelationship({
  entry: user,
  name: 'projects'
})
```
loaded, if this is the case, then it return a promise with the entries, if not nall entries could be founded, then it call the api, by the url indicated in the relationship.
request({ method = get, payload, url }): perform a request. Default request type is GET.

postRelationship({ entry, relationship, payload, delayed = false }): replace one relationship

computed: {
  ...
  labels: {
    set (labels) {
      this.$store.disptach('postRelationship', {
        entry: this.ticket,
        relationship: 'labels',
        payload: { data: labels }
      })
    },
    get () {
      ...
    }
  }
}

Getters

entry({ entry, id }): return an entry.

  props: {
    entry: {
      id: { required: true },
      type: { required: true }
    }
  }
  computed: {
    ticket () {
      return this.$store.getters(this.ticketRef)
    }
  }

relationship(entry, name): return the, loaded, entry/entries of an relationship.

  computed: {
    ticket () {
      ...
    },
    labels () {
      return this.$store.getters.relationsip(this.ticket, 'labels')
    }
  }

Utils

entryToRef(entry)

import { Utils } from 'vuex-jsonapi-client'

const entry = { id: 1, type: 'labels', attributes: { name: 'test' } }

// prints { id: 1, type: 'labels' }
console.log(Utils.entryToRef(entry))

entryArrayToRef(entryArray)

import { Utils } from 'vuex-jsonapi-client'

const entryArray = [
  { id: 1, type: 'labels', attributes: { name: 'test1' } },
  { id: 2, type: 'labels', attributes: { name: 'test1' } }
]

// prints [{ id: 1, type: 'labels' }, { id: 2, type: 'labels' }]
console.log(Utils.entryArrayToRef(entryArry))