# vuex-jsonapi-client

> json api client

Latest version **2.13.2** (published 2021-03-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install vuex-jsonapi-client
pnpm add vuex-jsonapi-client
yarn add vuex-jsonapi-client
bun add vuex-jsonapi-client
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.13.2 |
| Published | 2021-03-26 |
| First published | 2018-11-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 458.7 KB |
| Known vulnerabilities | 0 (+28 in 3 direct dependencies) |
| Install scripts | no |
| Author | Aron Wolf |
| Maintainers | aronwolf |
| Keywords | jsonapi |

## Links

- npm: https://www.npmjs.com/package/vuex-jsonapi-client
- Repository: https://gitlab.com/web_utils/jsonapi
- Homepage: https://gitlab.com/web_utils/jsonapi#README
- Issues: https://gitlab.com/web_utils/jsonapi/issues
- npm.io page: https://npm.io/package/vuex-jsonapi-client

## Dependencies (12)

- [vue](https://npm.io/package/vue.md) ^2.6.12
- [axios](https://npm.io/package/axios.md) ^0.19.2
- [rollup](https://npm.io/package/rollup.md) ^0.66.6
- [p-queue](https://npm.io/package/p-queue.md) ^3.2.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.13.8
- [vue-resource](https://npm.io/package/vue-resource.md) ^1.5.2
- [@babel/register](https://npm.io/package/@babel/register.md) ^7.13.8
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.13.8
- [rollup-plugin-vue](https://npm.io/package/rollup-plugin-vue.md) ^4.7.2
- [json-api-normalizer](https://npm.io/package/json-api-normalizer.md) ^0.4.16
- [rollup-plugin-buble](https://npm.io/package/rollup-plugin-buble.md) ^0.19.8
- [@babel/plugin-transform-for-of](https://npm.io/package/@babel/plugin-transform-for-of.md) ^7.12.13

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 2.13.2 (latest) — 2021-03-26
- 2.13.1 — 2020-12-16
- 2.13.0 — 2020-12-16
- 2.12.0 — 2020-10-17
- 2.11.0 — 2020-10-17
- 2.10.2 — 2020-10-07
- 2.10.1 — 2020-09-17
- 2.10.0 — 2020-09-13
- 2.9.0 — 2020-09-13
- 2.8.1 — 2020-08-01
- 2.8.0 — 2020-08-01
- 2.7.0 — 2020-05-26
- 2.6.0 — 2020-05-23
- 2.5.3 — 2020-03-04
- 2.5.2 — 2020-03-04
- … 34 more at https://npm.io/package/vuex-jsonapi-client/versions

## README

A rest client that follow the [jsonapi specificaccion](https://jsonapi.org/)

### 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 })`
  ```js
  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.
  ```js
  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.
  ```js
  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`
  ```js
  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.
  ```js
  const user = {
    id: '1',
    type: 'users',
    links: {
      self: '/api/v1/users/1'
    }
  }
  this.$store.destroy(user)
  ```
  ```js
  this.$store.destroy('/api/v1/users/1')
  ```
* `loadRelationship({ entry, name })`: check if all entries in a relationship are
  ```js
  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
  ```js
  computed: {
    ...
    labels: {
      set (labels) {
        this.$store.disptach('postRelationship', {
          entry: this.ticket,
          relationship: 'labels',
          payload: { data: labels }
        })
      },
      get () {
        ...
      }
    }
  }
  ```

### Getters
* `entry({ entry, id })`: return an entry.
  ```js
    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.
  ```js
    computed: {
      ticket () {
        ...
      },
      labels () {
        return this.$store.getters.relationsip(this.ticket, 'labels')
      }
    }
  ```
### Utils

* `entryToRef(entry)`
  ```js
  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)`
  ```js
  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))
  ```

### History

Links:
- Created by refactoring: https://gitlab.com/cmc_system/cmc

---
_Source: https://npm.io/package/vuex-jsonapi-client · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._