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 $.
meteor add herteby:grapher-vue
import GrapherVue from 'meteor/herteby:grapher-vue'
Vue.use(GrapherVue)<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>| 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 |
| 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent