add alternative way of adding actions

[christianmalek]

I'm planning to add a very simple way of adding actions as string.

At the moment actions can be added like this:

const store = new Vapi({
  baseURL: 'https://foobar.com',
  /*...*/
})
.get({
  property: 'post',
  action: 'getPost',
  path: ({id}) => `posts/${id}`
})

The alternative version I'm looking forward to looks like this:

const store = new Vapi({
  baseURL: 'https://foobar.com',
  /*...*/
})
.add('GET posts/:id INTO post AS getPost')

Or maybe like this:

const store = new Vapi({
  baseURL: 'https://foobar.com',
  /*...*/
})
.add("get", ({ id }) => `posts/${id}`, "post", "getPost")

One nice side effect would be that you didn't have to write the path function if it's that easy. The params will be detected (e.g. :id) and automatically added.

Please consider: This is just a draft. I'll maybe change the syntax or did overlook some problems.

[Koc]

@christianmalek What about define using standard ES6 class + typescript decorators? It could be done in very elegant way.

Something similar to https://github.com/championswimmer/vuex-module-decorators . It would added autocimplete in IDE + allow do automatic refactoring.

[christianmalek]

@Koc I will look into this. This looks pretty nifty. Thanks for sharing!

[slurmulon]

I wrote a detailed comment on this proposed change in a less relevant issue (whoops!):

#54 (comment)

[christianmalek]

@slurmulon Thanks for your input! I agree with all of your arguments. If someone really wants to have a "simpler" approach he/she could write an helper method to please his needs. =)

// without helper
.get({
  property: 'post',
  action: 'getPost',
  path: ({id}) => `posts/${id}`
})

// with helper (just an example)
.get(helper("post", "getPost", ({id}) => `posts/${id}`))

[BorisTB]

#54 (comment)

this structure would allow to easily generate actions from some data source

.actions({
  getPost: {
    method: 'GET', // if undefined try to get it from action's name
    path: ({ id }) => '/post/${id}',
    property: 'post'
  },
  getPosts: {
    path: '/posts',
    property: 'posts'
  }
})