Vuex and GraphQL

[smolinari]

Hi,

I am very interested in getting vue to work with data coming into the client from a GraphQL server. Would vuex be the place to start working on that? Or would I need to code my own module to support and fill vue with data queried via GraphQL? I'd really like to be able to add GraphQL queries in vue components directly, similar to how it is done with React.

Thanks for any help on a proper direction.

Scott

[smolinari]

Or is vue-resource a better place to consider requesting from a GraphQL server?

Scott

[smolinari]

Oooohhh.....and the vue-loader must be the key to getting what I want similar to React.

Yes, I am learning as I am going here. I might even find my own answer sooner or later. LOL! 😄

Still, your wise suggestion for direction to implement GraphQL would be greatly appreciated.

Scott

[yyx990803]

1. Vuex is not opinionated on how you communicate with the server;
2. GraphQL would replace REST and direct HTTP requests, so it would replace vue-resource;
3. GraphQL is a pretty low-level part of the stack, there's no "easy" way to make it work; you will have to build a non-trivial abstraction API around it to make it suitable for actual development use. But that's somewhat out of the scope for Vue/Vuex.

[smolinari]

Thank Evan,

What do you think about integrating Relay?

https://facebook.github.io/relay/docs/getting-started.html

Would that be a massive undertaking? Or would it be relatively easy? Sorry for asking these high level questions, but I haven't dug into any of this and before I do, I'd like your professional opinion.

Thanks again!

Scott

[yyx990803]

Relay is specifically designed for React. A comparison here is you'd have to build a Vue equivalent of Relay if you want to use GraphQL with Vue.

[smolinari]

Sounds like a challenge. And a lot of work. Thanks for the info.

Scott

[smolinari]

Hey @yyx990803 - could the two blogs below possibly give you some extra motivation to get Vue working with GraphQL? 😄 (like with a new module, like...um....VueQL) 😉 (or maybe someone else in the community?)

http://info.meteor.com/blog/reactive-graphql
https://voice.kadira.io/meteor-meets-graphql-3cba2e65fd00#.aosagsfyv

If I had your talent and experience Evan, I'd have already done it myself. Unfortunately, I don't have either. 😜 LOL! I realize too, time is another important factor.

Still though, having GraphQL queries within Vue components, similar to now, where we already have behavior and design in them, would finally cover the complete gambit of client side application needs in a totally modular componentized system. Wouldn't it?

Imagine design (css), behavior (JS/ reactivity with Vue) and data querying/ manipulation (JS/GraphQL) all packaged within each component. Am I the only one from the Vue community, who thinks that combination would be a really cool thing to achieve?

Facebook seems to think it is a really good idea too, of course, as they have been using a similar component setup with React and Relay for over 2 years now. I think Vue could blast past React, because JSX simply sux and to me, React is bloated and convoluted, but that perspective probably just comes from my own inexperience with React. Still, Vue is just some much more logical and easy to work with.

I think GraphQL is also too good to ignore and the earlier one gets on the GraphQL bandwagon, the better it will be for the future, once everyone starts switching to GraphQL APIs. I'd venture to say, it is only a matter of months, before GraphQL really catches on fire.

Scott

[xtrasmal]

@smolinari are you building it yet? Or what?

[smolinari]

No. I am not there yet. Sorry.

Scott

[gauravtiwari]

@smolinari - May be this would be helpful https://github.com/apollostack/apollo-client, they don't have a vue wrapper though, but open to discussion - https://github.com/apollostack/vue-apollo

[smolinari]

Thanks @gauravtiwari - Hihi...I'm actually way ahead of you. 😉 Sashko started that repo because of my inquiry. 😄

apollographql/apollo-client#143

I've also found out in the meantime that an apollo-client/redux/revue/vue combo probably isn't the best solution. Ideally, something that binds apollo-client to Vuex would be much better. 😄

Something interesting that I've learned in the meantime too is that Meteor is betting on a much more "interoperable" future with GraphQL. So, I think it is just a matter of time, before this idea becomes a reality. And it certainly will be one if I can do something about it. It will just take a lot longer. I have so much to learn....

Scott

[stubailo]

There are two integration points Apollo Client supports that should make it easy to integrate with Vue:

1. RxJS
2. Redux

Those seem to be the most popular data management systems at the moment, perhaps there is already something with vuex and rxjs?

[smolinari]

Interesting. I found this. https://github.com/vuejs/vue-rx

Scott

[yyx990803]

The easiest integration I can think of is invoking a Vuex mutation inside a watchQuery subscription callback. There could be some helpers to make this binding process more declarative, but the concept is pretty straightforward.

[smolinari]

Thanks Evan @yyx990803.

That is a starting point. From an architectural standpoint, I think I get it. From a code production standpoint, I still have some learning to do.

I think your suggestion is also the confirmation for me that what Mr. Browne says here in his "but..." slide about using redux with Vue is correct. redux simply isn't built for Vue. 😄

https://youtu.be/l1KHL-TX3qs?t=1306

Scott

[jakobrosenberg]

Is Vue 2, with its virtual DOM, a better match for Redux?

[smolinari]

Hi @jakobrosenberg - from what I understand, it isn't a good mix for the same reasons 1.0 doesn't go well with Redux. The video above I linked to explains the issue of the returned/ stored data in Redux well. It's linked to the place in the video where James goes into the details.

Scott

[zoomclub]

Horizon from RethinkDB is working on GraphQL integration. I'd like to see a Vue Horizon module that handles all aspects of working with Horizon, including the local (offline) cache that sits between Horizon and end UI components. Really tired of the Vuex = Redux type of setup, its time to make a quantum leap forward 💯

[xpepermint]

@zoomclub I'm afraid RethinkDB is going away :(.

[friday]

The company behind it (named after the product) is shutting down, but the product isn't. At least according to the offical announcement: https://www.rethinkdb.com/blog/rethinkdb-shutdown/

[janat08]

Any chance that apollo client's binding to graphql/data could be implemented for vue?

[ykshev]

I was looking around on this topic and found out this solution for apollo and vuex: https://github.com/okoala/egg-vue-typescript-apollo-graphql-startkit/blob/master/src/store/modules/user.ts

But still interesting in some more "native" integration with all features and docs.

[smolinari]

This gets the closest up till now AFAIK. https://github.com/Akryum/vue-apollo

With a discussion about implementing Vuex: vuejs/apollo#7

And from what I understand, my comment above about Redux being a bad choice for Vue (now 2.0) is somewhat incorrect. Anyone with more experience please do chime in.

Scott

[janat08]

basically apollo client is state management meant to serve the data, you get a bunch of redundancy using another state management atop that, the reduc/apollo integration disables that: I'm uncertain about what that entails, but I'm disinclined to belief that, that package follows suit.

[smolinari]

My idea with vuex and apollo wasn't to build vuex on top of apollo, but to integrate vuex into apollo and drop apollo's need for redux. Though, as I mentioned above, now with Vue 2.0, redux's way of working isn't such a problem anymore (as described in this video) I believe.

Scott

[stubailo]

Still happy to work with anyone interested to make VueX plug into apollo!

[zoomclub]

@xpepermint Just as an update, I have come to understand Vuex better and work with it. To bad about Horizon, yet Vuexfire seems to fit my needs as well. Just waiting for Vuexfire to support Vuex modules, which should be soon 👍

[smolinari]

That is interesting, but Vuexfire doesn't use GraphQL, does it?

Scott

[zoomclub]

@smolinari I was a little off topic there, just updating the earlier comment I had made about Vuex :)

Vuexfire does not support GraphQL but that might be great to have? In my case I have my JSON well structured/graphed already, so I can likely make standard Firebase queries for the data aspects my components need.

[smolinari]

Firebase uses REST. That is great, if your app isn't too big or you don't plan to build apps for too many different devices. However, once you get to a point where you are developing apps for a number of devices and/or your app gets somewhat larger and complicated, GraphQL is a great solution. It solves those problems and it improves dev productivity too, especially as more and more tooling gets built around it. 😄

Scott

[pyrossh]

Relay 2.0 Is going to be framework agnostic. Maybe we can try that out.

[smolinari]

@pyros2097 - I don't mean to sound pesimistic, but Relay isn't even 1.0 yet and now they are talking about 2.0? Can you post a reference link to where it is said they are building a framework agnotic version? I couldn't find anything with Google.

Scott

[pyrossh]

Use the index Luke.
Here's the list,
facebook/relay#1369
https://facebook.github.io/react/blog/2016/08/05/relay-state-of-the-state.html
https://zeemee.engineering/relay-2-simpler-faster-more-predictable-128769e72318#.aivjvccjg

They are going to be rolling out 1 feature at a time so that current users can have a smooth migration path from the start of next year.

[smolinari]

Ooohhh..... "new features such as persisted queries".

Thanks @pyros2097. I am now optimistic. 😄

Scott

[smolinari]

Looks like a lot of working parts to hook into Vue. But, they are a lot of really nice looking parts. 😄
https://www.youtube.com/watch?v=OEfUBN9dAI8&feature=youtu.be
https://speakerdeck.com/josephsavona/reintroducing-relay

Scott

[tudor-sv]

This seems to be the official integration for Apollo/GraphQL into Vue:
https://github.com/Akryum/vue-apollo

[PierBover]

Hey everyone, here is an example project on how I think vanilla Apollo Client should be used with Vuex.

https://github.com/PierBover/vuex-apollo-example-project

vue-apollo favors making queries directly from the component which IMO is an anti-pattern, specially if you are using Vuex.

[shtse8]

@PierBover I am thinking for a week about where I should fetch my data: inside the component or in the global scope and putting it into my vuex store. I don't know which one is better. as apollo client has it's store too. as apollo said, they have their own fetch policy, so even the same graphql putting inside several the components, the query is only being executed once.

[PierBover]

@shtse8 moving the code out of the view components is not intended to make your queries more efficient but to architecture your project better.

In my opinion view components should only care about painting to the DOM and capturing user input, anything outside of that should go somewhere else.

The link I provided was just a simple example, but for medium and large projects your logic responsible for API calls (either REST or GraphQL) should also be decoupled from Vuex and reside in its own modules.