Binding for Vue.js

[smolinari]

Hi,

As suggested in #63 I'd like to suggest a binding for Vue.js. I'd also be very much interested in helping, where I can. Not a very good JS programmer, but I could help with docs and such, where needed.

Scott

[smolinari]

Or, could this already be a way to get to a Vue GraphQL "speaking" system?

https://github.com/yang-wei/vue-redux

As in, use the Redux binding here and just have Apollo fill in the blank?

Scott

[smolinari]

Or can apollo client be used with Vuex? https://github.com/vuejs/vuex

Scott

[stubailo]

Hey sorry I didn't respond yet, was visiting my parents last weekend!

All of the view integrations are community projects, I'm working only on the core. Perhaps you can look into the Angular and React integrations as a place to start?

There are two main approaches:

1. The React integration uses the Redux store and readFromStore directly: https://github.com/apollostack/react-apollo/blob/071c75c588699e632ac2d56d53db7277d04a8dfb/src/connect.tsx#L211
2. The Angular integration uses the observable returned from watchQuery

I think the second is much easier and will result in less code, so is probably a good place to start.

If you want, we can host the integration here, in which case it would be helpful for me to see a design first: https://github.com/apollostack/vue-apollo

If you prefer, you can also do it as a personal project.

Either way, I don't think this requires any changes to the core client yet!

[smolinari]

I am, unfortunately, way too inexperienced to do such a project on my own. Though, I am always up for challenges. I'll see, if I can put anything workable together. Maybe in a week or two. 😄

I noticed both libraries are written in Typescript. Is that any kind of prerequisite?

Scott

[stubailo]

Nope! I just wanted to use TypeScript. You can use whatever you want.

[smolinari]

I am starting to dig into the documentation, and I get the feeling, apollo-client and Vuex share a lot of common functionality ground. So, I'm thinking I can only take ideas from Vuex to implement vue-apollo.

I hope you don't mind me thinking out loud here. It's like throwing bologna on the wall. Some slices might stick. LOL! I feel like these kids to be honest. https://www.youtube.com/watch?v=MQI70h36Psg

😄

Scott

[stubailo]

Couldn't you just use this? https://github.com/vuejs/vue-rx

Once we implement: #149 which will let you integrate with RxJS

After this, it would look like (modified code sample from that repo):

var Vue = require('vue')
var Rx = require('rx')
var VueRx = require('vue-rx')
var ApolloClient = require('apollo-client')

var client = new ApolloClient();

// tada!
Vue.use(VueRx, Rx)

// now you can bind to Rx observables directly in `data`
new Vue({
  el: '#app',
  data: {
   queryResult: client.watchQuery({
    query: `...`
   })
  }
})

I guess it depends on whether you are using VueX already.

[smolinari]

Not using anything currently. So, I am really flexible on the (best) solution.

I have other concerns, which I am not sure the redux route will help with. For instance, I am looking for Relay like container functionality, when it comes to query aggregation in Vue components. I'd like to be able to add containers/fragments to the components themselves and have them bundled up for proper querying accordingly.

https://facebook.github.io/relay/docs/guides-containers.html#containers-are-higher-order-components

I was about to start a different issue to ask about this. So, we can continue that thread of thinking there. 😄

Scott

[stubailo]

I'd like to be able to add containers/fragments to the components themselves and have them bundled up for proper querying accordingly.

This is something that the core client will have per #148 so it doesn't need to be built into the view integration; or if it is it will be a very thin wrapper.

[smolinari]

Ah....very good! Looks like I'll have to wait a bit on some things.

Do you see any issues with the binding through Redux and the query fragment aggregation working together?

Scott

[stubailo]

Nope! I think the fragment aggregation is not actually a lot of new work, but it's just a bit tricky to get right. Is that blocking you from using this? What's the project?

[smolinari]

The project is an admittedly huge one and just my dream and hobby. www.skooppa.com I've been looking for the right technologies for 3 years now and they are just starting to come together.

Nothing is blocking really. It is all totally experimental currently. I have no real code basis yet to be honest. Just a bunch of ideas and a fair direction, like wanting GraphQL to be the core API. Oh, and PHP for the back-end along with a graph database.

BTW, I found another binding for Vue and Redux, which looks a bit more promising.

https://github.com/revue/revue

Scott

[smolinari]

In the meantime, I've learned that redux isn't really the best choice as a store system to work with Vue. It is going to be better to try and bind apollo-client to Vuex, Vue's own Flux system, directly.

Scott

[ejfrancis]

looks like this may be what you're looking for https://github.com/Akryum/meteor-vue-component/tree/master/packages/vue-apollo

[smolinari]

Thanks @ejfrancis. However, it would need to work with Vuex to be feasible for our project.

Scott

[stubailo]

There's a great Vue integration now: https://github.com/Akryum/vue-apollo

For VueX, probably better to open a separate issue.