educob/grapher-vue

Integrates Vue with Grapher in an easy-to-use way

Grapher + Vue

This package makes using Grapher with Vue in Meteor easier and more declarative.

It automatically subscribes to your queries when the component is loaded, and unsubscribes to them when the component is destroyed.

Query parameters are reactive, using Vue's reactivity. So if you for example use this.limit in your query, it will update the query and subscription when this.limit changes. If you use @mitar's fork of Tracker, it will also respond to reactive Meteor variables.

BREAKING CHANGE: Beginning with 1.0, instead of the result being in result.data, the result is the root object, and the extra properties are prefixed with $.

Setup

meteor add herteby:grapher-vue

import GrapherVue from 'meteor/herteby:grapher-vue'
Vue.use(GrapherVue)

Example

<template>
  <div v-if="users.$readyOnce">
    Users: {{users.$count}} of {{users.$fullCount}}<br>
    Time taken: {{users.$time}}ms
    <div v-for="user in users">
      <h4>{{user.username}}</h4>
      <pre>{{user.profile}}</pre>
    </div>
    <button v-if="users.$count < users.$fullCount" @click="limit += 20">Load more</button>
  </div>
  <div v-else>Loading...</div>
</template>

<script>
  export default {
    data(){
      return {
        limit:20,
      }
    },
    grapher:{
      users(){
        return {
          collection:Meteor.users,
          fullCount:true,
          query:{
            $options:{limit:this.limit},
            username:1,
            profile:1
          }
        }
      }
    }
  }
</script>

Demo repo

API

Property	Type	Required/Default	Description
collection	Mongo.Collection	Required	The root collection for the query
query	Object	Required	Argument for Grapher's createQuery()
subscribe	Boolean	Defaults to true	If set to false, uses a method call instead. The result structure is the same regardless
single	Boolean or String	Defaults to false	If set to true, it will work like fetchOne(), and adds $options:{limit:1} to the query. If a String, it also adds $filters:{_id:theString}
fullCount	Boolean	Defaults to false	If true, getCount() will be called to fetch the full count from the server. Useful if you have set a limit on the query
countOnly	Boolean	Defaults to false	If true, only getCount() will be called, and no data will be fetched. Useful for notification badges and such. Instead of the normal format, the result will simply be false initially, and then when getCount() returns, a Number representing the count.
disabled	Boolean	Defaults to false	Disable the query. Use with a reactive Vue variable if you for example want to wait for the user to input a search string, or select which document to show

Extra result properties

Property	Type	Description
$ready	Boolean	Wether the subscription has finished fetching all documents
$readyOnce	Boolean	Unlike ready, this will remain true if the subscription is later changed (useful for loading indicators)
$count	Number	Number of results
$fullCount	Number or false	Only available if you set fullCount or countOnly to true. This will initially be set to false. Once the getCount() server call returns, this will be updated with the count
$time	Number	How many milliseconds it took to fetch all the data
$disabled	Boolean	If it's disabled

If you need to get rid of these for some reason, just use this Lodash function:

_.omitBy(result, key => key[0] == '$') //_.omit in Underscore