vue-feathers-hotload

Automatically load/reload data from feathers services to vue components. Load queries are live and reactive. Feathers client must be configured with feathers-reactive.

Install

npm i -S vue-feathers-hotload

Usage

In entry js:

import app from 'pathToYourFeathersClient' // configured feathers client app here
 
app.use ...
 
app.setup() // must use and setup all client-side services before Vue.use(VueFeathersHotload)
 
import Vue from 'vue'
import VueFeathersHotload from 'vue-feathers-hotload'
Vue.use (VueFeathersHotload, app, {
  idField: 'id' // id field name for all services. '_id' by default
})

In Vue components:

data: function () {
  return {
    a: ...,
    b: ...
  }
},
hotloads: function () {
  return {
    item: function () { // item would be an object containing the loaded data
      return {
        service: 'feathersServiceName',
        idField: 'id', // id field name for this services. '_id' by default
        id: function() {
          return {
            // the id of of the item. Can use this.a/b to make the id. Reactively reload when this.a/b changes
          }
        },
        then: function (result) {
          // do something when loaded/reloaded
        },
        catch: function (error) {
          // do something when laoding is failed
        }
      }
    }，
    list: function () { // list would be an array containing the returned data, with proper list.length/total/limit/skip properties. The list is an object too, and items can be accessed via `list[id]`
      return {
        service: 'feathersServiceName',
        idField: 'id', // id field name for this services. '_id' by default
        query: function() {
          return {
            // your live query here. Can use this.a/b in query. Reactively reload when this.a/b changes
            // $limit, $skip, $sort, $select, $in, $lt ... all supported and watched for live query
          }
        },
        object: true, // make
        then: function (result) {
          // do something when loaded/reloaded
        },
        catch: function (error) {
          // do something when laoding is failed
        }
      }
    }
  }
}

A more detailed example in coffee (I always tell you coffee is neat):

data: ->
  id: 'xxxxxxx' # for item id below 
  sort: 1 # or -1, for $sort below 
  limit: 10 # for $limit below 
hotloads: ->
  item: ->
    service: 'xxx'
    idField: 'id'
    id: -> this.id # will reload when this.id changes 
    then: (result) -> ...
    catch: (error) -> ...
  list: ->
    service: 'xxx'
    idField: 'id'
    qeury: ->
      someField: someValue
      $select: ['field1', 'field2', ...]
      $sort:
        field1: this.sort # will reload when this.sort changes 
      $limit: this.limit # will reload when this.limit changes 
    then: (result) -> console.log result
    catch: (error) -> console.log error
 

Then this.item, this.list, this.list.total/limit/skip/length can be used in your Vue component.

Bonus: reading/writing flags for cached services

If you are using feathers-cache, any cached services have extra flags to show if the services are reading from or writing to the remote server. And the bonus is, once vue-feathers-hotload is used, these reading/writing flags become reactive and can be directly used in vue component. For example:

import cache from 'feathers-cache'
app.use 'cachedServiceName', cache {...} # define your client-side cached service 
app.setup() # initialize services 
 
import Vue from 'vue'
import VueFeathersHotload from 'vue-feathers-hotload'
Vue.use VueFeathersHotload, app

Now you can do this in your vue component's <script>:

computed:
  # the three are identical 
  myService1: -> this.$feathers.services.cachedServiceName
  myService2: -> this.$services.cachedServiceName
  myService3: -> this.$feathers.service(cachedServiceName)
 

And in your component's <template>:

<div>{{myService1.loading}}</div>
<div v-if="myService2.saving">...</div>