Adventures in Vue and GraphQL

08-11-2018 - 2 min -
graphql javascript vuejs

For better or worse I have a background in web development. I have worked heavily in every version of Angular, know the ins and outs of yarn and npm, am well versed in the HTML/CSS/JS trinity, etc.

And until now I can't rightfully say that I truly enjoy webdev. Sure the feedback loop of code -> view in browser is nice both to work with, and for feeding that instant-gratification craving we all have. But some combination of the tooling, the language, or the ecosystem always irked me.

Until I tried VueJS, at the repeated urging of a friend and after attending a talk he gave on it. At first it just felt like another web framework, one of the dozens that comes and goes in the ever churning cycle that is the JavaScript ecosystem. But as I dug into it I became more and more impressed with the framework.

I think the key phrase word to describe what I like about Vue is: simplicity. From tool-set to file-structure it is all exceedingly simple. Templates are just HTML, all parts of a component live in one .vuefile, component data can be acquired in different ways but is all accessed the same way. And with that simplicity comes amazing extendability. Vuex is barely more than just basic JS calls, vue-routeris just an object mapping routes. And using components in others is as easy as an import. All in all Vue has surprised me with the verbosity of it's simplicity.

But this is all things I learned in a pursuit of a side project, one that had another goal as well. While I wanted to learn more Vue, I also wanted to learn GraphQL and I decided to use Hasura GraphQL-Engine. Firstly let me say that Hasura is a breeze to use. A handful of clicks to get a new database and wrapping GraphQL server all with a slick and easy admin interface. What more could you ask?

Combining Vue and GraphQL worried me initially, but the pseudo-official vue-apollomade everything easy. That seems to be the theme here with this whole post, that somehow I managed to stumble on the perfect combination of tools that were not only powerful, but easy to use and get started with. Getting from nothing to basic site with data pulled from GraphQL took me only a couple of hours.

While I say everything has been easy, there were a few hiccups. Firstly there is a slightly confusing duality of the Vue CLI which moved NPM package names with version 3, but some of the docs haven't been updated. So remember that @vue/cli is the right one. Secondly there are a number of subtle idiosyncrasies with the Hasura GraphQL interface, as it is designed to map closely to the Postgres database underneath. Though once I got through those things have been going quite well.