Skip to content

Commit 272f8d5

Browse files
committed
Update README.md
1 parent 75c6576 commit 272f8d5

File tree

1 file changed

+43
-4
lines changed

1 file changed

+43
-4
lines changed

README.md

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@ With this plugin, you can use your HAL JSON API in a fluid way:
1111
```js
1212
// Reading data and traversing relationships
1313
let singleBook = this.api.get('/books/1')
14-
let bookName = this.api.get().books().items[0].name // visits the 'books' rel on the root API endpoint
14+
let firstBookName = this.api.get().books().items[0].name // visits the 'books' rel on the root API endpoint
1515
let author = singleBook.author() // related entity
1616
let bookChapters = this.api().books().items[0].chapters()
17-
this.api.reload(author)
17+
author = singleBook.author() // doesn't trigger another network call because we already fetched it
18+
this.api.reload(author) // force re-fetching an entity or a URI
1819

1920
// Writing data
2021
this.api.post('/books', { name: 'My first book', author: { _links: { self: '/users/433' } } })
@@ -25,7 +26,7 @@ this.api.del(author).then(() => { /* do something */ })
2526
This library will only load data from the API when necessary (i.e. if the data is not yet in the Vuex store).
2627
It also supports templated links and partially loaded data from the API.
2728

28-
# Install
29+
# Installation
2930

3031
```bash
3132
npm install hal-json-vuex
@@ -45,7 +46,7 @@ const store = new Vuex.Store({})
4546

4647
axios.defaults.baseURL = 'https://my-api.com/api'
4748

48-
Vue.use(HalJsonVuex(store, axios))
49+
Vue.use(HalJsonVuex(store, axios, { /* options */ }))
4950
```
5051

5152
```js
@@ -58,3 +59,41 @@ this.api.reload(someEntity)
5859
<!-- Use it in the <template> part of a Vue component -->
5960
<li v-for="book in api.get('/all/my/books').items" :key="book._meta.self">...</li>
6061
```
62+
63+
# Available options
64+
65+
### apiName
66+
This package will install a module into your Vuex store, as well as an accessor (`this.api`) into your Vue prototype.
67+
These are by default called `api`, but in case you want to change that or need to support multiple APIs at the same time, you can use the `apiName` option:
68+
```js
69+
Vue.use(HalJsonVuex(store, axios, { apiName: 'backend' }))
70+
71+
// In a Vue component
72+
let someEntity = this.backend.get('/some/endpoint')
73+
```
74+
75+
### forceRequestedSelfLink
76+
When requesting an entity, some HAL JSON APIs will not always return the same `self` link as it was in the request.
77+
An example would be if the API added a `page=0` query parameter to the `self` link of a collection, even if the request was done without that parameter:
78+
```
79+
// request
80+
GET /all/my/books
81+
82+
// response JSON from the API
83+
{
84+
"_embedded": {
85+
"items": [ ... ]
86+
},
87+
"_links": {
88+
"self": {
89+
"href": "/all/my/books?page=0"
90+
}
91+
}
92+
}
93+
```
94+
This can lead to problems, because in your component template you might be requesting `/all/my/books` but that URI never appears in your Vuex store, causing an infinite loop of re-fetching the same URI.
95+
96+
In case your backend API does this, you can set the `forceRequestedSelfLink` option to true, and the top-level `self` link in all responses will be overwritten to the link that was actually requested.
97+
```js
98+
Vue.use(HalJsonVuex(store, axios, { forceRequestedSelfLink: true }))
99+
```

0 commit comments

Comments
 (0)