HAL API + Vuex

api
rest

#1

Has anyone in the Vue community worked with HAL APIs?

http://stateless.co/hal_specification.html

The place I’m at at the moment uses HAL exclusively, but their stack is Angular 1.0 and they want to move to Vue. I need to figure out the best way to have both work nicely together.

If you’ve not worked with HAL before, it’s a HATEOAS format, and it’s a little mind-(and code)-bending when you first start working with it.

Rather than have a known list of URLs that you call to get known resources, the server returns an object containing the resources (say, users) and for any related resources (say posts and comments) it returns links, which you ask the client to fetch().

Once fetched, the link objects go from being (essentially) plain objects with just the href to being inflated as HalResources with the fetched data and new methods to do child-fetching, etc.

Thus you end up with a tree of data, starting from a “root url”:

Key:

  • -> iterate over embedded data
  • => fetch data from the linked resource
 -> sites: Root {_uri: URI, links: {…}, props: {…}, isLoaded: true, settedProps: Array(0), …}
   -> site: Root {_uri: undefined, links: {…}, props: {…}, isLoaded: true, settedProps: Array(0), …}
      => siteData: HalResource {_uri: URI, links: {…}, props: {…}, isLoaded: true, settedProps: Array(2), …}
        -> company: Space Invaders Parent - DEV HalResource {_uri: URI, links: {…}, props: {…}, isLoaded: true, settedProps: Array(1), …}
          => apps: 1 HalResource {_uri: URI, links: {…}, props: {…}, isLoaded: true, settedProps: Array(2), …}
            -> app: vidyo {id: 2, name: "vidyo", description: "A lightwight Vidyo video confrencing integration t…ls between staff a customers as part of a booking", version: "0.1", installer: "si@bb", …}

The big difference is - you never need to know the URLs themselves, as the HAL client manages that from the root url; everything else after that is just examining values, embedded resources and linked resources.

This is in contrast to having, say, several root-level services or stores you would call from, only knowing the ids you need, as you already know the URL template.

So, whilst getting my head around all this, I was wondering if anyone has experience in this area?

Especially with how to store the returned data in the store, and as pure state or classes or what?

Thanks.