[Package] Grapher + Vue Helper

herteby · 2017-06-20T14:54:25.498Z

I’m working on a Vue Mixin to manage Grapher queries.
It automatically subscribes to the queries when the Vue instance is created, and unsubscribes when it’s destroyed, and it updates them when Vue variables they depend on change.

You can use it like this:

<template>
	<ul>
		<li v-for="user in users.data">{{user.username}}</li>
	</ul>
</template>

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

The package is now available on Atmosphere and GitHub!

Demo

(not guaranteed to be up)

You can also clone my testing repository from GitHub, it’s a Meteor project with some test data and everything set up.

Any suggestions would be appreciated

It doesn’t support Meteor reactivity for updating query options at the moment, only Vue reactivity.

@robfallows @diaconutheodor

diaconutheodor · 2017-06-20T15:33:49.007Z

That sounds good, you can get some inspiration to how I treated it in https://atmospherejs.com/cultofcoders/grapher-react

If a query is reactive then i’m wrapping it in a meteor tracker, otherwise I’m using React’s way of doing things.

robfallows · 2017-06-21T09:31:07.166Z

Definitely interested in this - but I’ve not used Vue before, so at the moment it will be more of an academic exercise for me.

herteby · 2017-06-21T10:31:40.994Z

Okay, published the package now!

GitHub

Herteby/grapher-vue

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

herteby · 2017-06-26T14:54:12.963Z

@robfallows Did you check out my demo?
I think it’s pretty neat how little code was necessary to create it, even with all the features it has.

robfallows · 2017-06-27T09:30:06.790Z

Yes I did - I think I lost a large part of my day being mesmerised by the transitions .

One slight oddity I don’t understand - why does the entire stylesheet get rendered at the start of the page?

herteby · 2017-06-27T10:44:48.217Z

Ah, I was just messing around with CSS and tested if you could make <head> and its children visible
The latest version doesn’t have that.

herteby · 2017-07-05T07:43:41.894Z

I’ve updated my testing repo with a pretty cool infinite scroll feature, combining grapher-vue with Akryum’s vue-virtual-scroller!

It smoothly scrolls through a list of 50.000 items that are fetched on-demand from the server, only subscribing to those that are visible based on scroll position

For lazy people, the demo may or may not be available at https://dev.herte.by/ depending on what I’m doing at the moment

akryum · 2017-07-05T08:44:58.168Z

This demo is very nice! Awesome!

robfallows · 2017-07-05T08:58:36.779Z

That is really sweet!

serkandurusoy · 2017-07-05T12:00:47.153Z

robfallows:

I think I lost a large part of my day being mesmerised by the transitions

Yeah, @herteby you should probably publish a cordova version of that colored boxes section on the app store so I can take it everywhere I go, you know, to just pointlessly yet soothingly stare at it for copious amounts of time.

nxcong · 2017-10-09T11:38:54.510Z

Hi, i got an error when use with vue-ssr.

W20171009-18:35:20.687(7)? (STDERR) TypeError: query.subscribe is not a function
W20171009-18:35:20.687(7)? (STDERR)     at run (packages/herteby:grapher-vue/grapher-vue.js:88:17)
W20171009-18:35:20.688(7)? (STDERR)     at [object Object]._onTimeout (packages/herteby:grapher-vue/grapher-vue.js:148:10)
W20171009-18:35:20.689(7)? (STDERR)     at Timer.listOnTimeout (timers.js:92:15)

herteby · 2017-10-09T12:06:31.255Z

@nxcong I’ve replied to your github issue.

diaconutheodor · 2017-10-09T12:37:42.419Z

herteby:

grapher:{
		users(){
			return {
				collection:Meteor.users,
				query:{
					username:1,
					$options:{limit:this.limit}
				}
			}
		}
	}

Quick tip, you can also avoid specifying collection, if u use the collection’s name:

createQuery({
    users: { ... }
})

If you want to avoid having both collection and query params specified. But I agree that this is cleaner version. The only reasoned I added the functionality above was easy testing with Grapher Live.

Usually I like keeping queries modularised in their own file. So having something like: users: getUsersQuery should also be an option. Because in time queries grow a lot in their vertical size, and you keep the code cleaner this way.

herteby · 2017-10-09T13:30:11.711Z

“collection” and “query” are not the only arguments though, there are 5 other optional ones too.

If you put the query in another file, you couldn’t use the reactive Vue component properties in it though. I guess you could export a function that returns the query, which you then call with function.call(this)

diaconutheodor · 2017-10-09T13:52:57.076Z

This is why I created the .clone() function of a query. query.clone() creates a new instance of it.

herteby · 2017-10-09T14:54:10.401Z

That still leaves you with the problem of being outside Vue component scope and not having access to the component data though.

Hmm, I guess I didn’t think of setParams and $filter when I made the package. That would be another way to do it, and would work better with named queries too I guess I’m not quite following the intended use.

diaconutheodor · 2017-10-10T06:30:20.354Z

There must be a way to reuse modules inside a vue module. Either with import, either by defining a global namespace like:
App.Queries.getAllUsers

If vue does not allow this, or the integration of vue in meteor, then something is really bad with it. It should be modular.

herteby · 2017-10-10T07:32:30.615Z

Yes, you can can use import/export with Vue, and for a static query this would be fine.

How grapher-vue works though is that it takes the function you define and puts it in a Vue watcher, which reruns the function and updates the query whenever any reactive Vue variables (this.limit in the example) that you’ve used in it change. So if you have pagination or search for example, it automatically updates the query when you change the “search” or “page” variables on the Vue component. This requires that grapher-vue is given a function rather than an object.

I realize now that your intention was probably to use setParams and $filter for this type of functionality, though that way is still slightly less flexible than the way I’ve done it.

I should probably add a params argument though, so that you can use grapher-vue with named queries + dynamic params, which isn’t possible at the moment.

martineboh · 2019-04-09T14:53:39.820Z

Any updates on you @herteby adding the $filter and setParams options to grapher-vue?