Add example for fetching meta data

[Ruud Boon]

FIrst of all thank you for this library! Works really cool.
I'm getting back a data set from my endpoint and on the root level there are meta and link tags.
How do I retrieve those (I think with the helpers...)?
I couldn't figure it out from the documentation. Could you add some example for that?
Would like to display the total number of records etc.

[Matthew Richardson]

The usual way to get this is to use the preserveJSON config option described here:

https://github.com/mrichar1/jsonapi-vuex#configuration

This provides the original JSON response in _jv under a json key in the result from GET/POST etc.

So with it enabled you could do the following to get the object root:

this.$store
  .dispatch('jv/get', 'widget/1')
  .then((data) => {
    console.log(data['_jv']['json'])
  })

[Ruud Boon]

@mrichar1 Ah I see. I was expecting to find this in the store as well. Thnx.

[Matthew Richardson]

The meta and links data in the root is usually related to the request, rather than the resulting data (which has it's own links/meta sections). As such it wasn't obvious where to put it in the store, or how to manage it when there could be multiple asynchronous API requests all happening at once.

Saying that if there's a specific use case you can describe where it would make sense for the root metadata to persist, then I could have a think about how this could be implemented.

[Ruud Boon]

@mrichar1 I think the pagination is one of the best examples in this case. When you fire a query with a limit of x results and you would like to paginate this you need to know the number of pages so you can create a paginator.

https://jsonapi.org/examples/#pagination

Currently using this in combination with a datatable I bind the data from the store to the table and need the meta data for setting up the pagination.

[Deleted user]

@mrichar1 @ruudboon
I was wondering if you have a working example on how to handle pagination using the jsonapi-vuex lib?

[Matthew Richardson]

@florin-tomozei-wpd I don't have any general worked examples (since it mostly comes down to the Vue component you want to have paging data in, and how the API has implemented paging data).

First enable preserveJSON as described above, then make sure that you use the return value from actions (which contain meta) rather than calling getters against the store for your data.

Then in the simple case where meta contains links just set the navigation buttons on your component to make requests to these links

In the more complex case where meta containing something like:

"meta": {
    "available": 100,
    "limit": 10,
}

You would need to have methods that calculated offset and added this to request params as appropriate for your first/previous/next/last buttons.