Reactive Endpoints

How it works?

Like computed properties endpoints can be reactive functions, when any parameter inside the functions changes, endpoint regenerated.

Also if endpoint.auto evaluates to true, request will be sent automatically.

let app = new Vue({

    data() {
      return {
        selectedUserId: 1,
        postId: 2
      }
    },

    chimera: {  
      user() {
        return `/api/v1/users/${this.selectedUserId}`
      },
      post() {
        return {
          url: '/api/v1/posts',
          params: {
            postId: this.postId
          },
          method: 'post',
          auto: true,
          // if you want use cache or ssr features define a unique key based on it's parameters
          key: 'post-' + this.postId,
        }
      },
    }

})

Any Endpoint parameters, headers, url, auto, ... can change

Example

<template>
  <div class="example-box">
    {{ user.baseURL }}{{ user.url }}
    <br>
    <input
      v-model="userId"
      type="number"
    >
    <br>
    <span v-if="user.data">{{ user.data.name }}</span>
    <span v-if="user.loading">Loading...</span>

    <span v-if="user.error">Error: {{ user.status }} {{ user.error }}</span>

    <div>
      <input
        v-model="keepData"
        type="checkbox"
      > Keep data
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReactiveEndpointExample',
  data () {
    return {
      userId: 1,
      keepData: true
    }
  },
  chimera: {
    user () {
      return {
        url: '/users/' + this.userId,
        keepData: this.keepData
      }
    }
  }
}
</script>

https://jsonplaceholder.typicode.com/users/1

Keep data

keepData property

By default, response data will be kept between reactive changes.

Set keepData to false to remove all status, data, and error between reactive changes