Vue GraphQL

Hello,

I’m working on a GraphQL client called greed that I haven’t open sourced yet. Its framework/library agnostic and wanted to create some vue bindings for it. I want to base the bindings off the same signature that I got working with react which is:

container(
  greed, 
  defaults, 
  queries, 
  mutations
)(component);

// Using a decorator
@container(
  greed, 
  defaults, 
  queries, 
  mutations
)
someComponent

greed: greedInstance- is the greed instance you want to use defaults: ?function - are the default data for the component to render queries: ?function - are the queries you can run when some user input occurs mutations: ?function - are the mutations you can run when some user input occurs component: Component - the component to enhance

The container essentially enhances whatever component it receives with data needed to render and methods that can be executed to run queries and mutations when some user input occurs in the application.

However given that there are different types of templates vs components in vue i’m not sure how to go about injecting/enhancing vue components/templates. I’m not very familiar with vue which is why I wanted some feedback and direction on how best to accomplish this with vue. Any help and guidance would be really appreciated.

[yyx990803]

You don’t need to worry about templates at all. The template is basically just the render function.

In Vue, a component is in most cases defined as a plain options object:

export default {
  data () { ... },
  created () { ... },
  computed: { ... },
  methods: { ... }
}

You basically modify/patch this options object in your enhancer function.

Alternatively, Vue plugins can apply a global mixin that injects lifecycle hooks into all components. In the lifecycle hooks you check for a custom options field (e.g. graphql or greed):

const greedPlugin = Vue => {
  Vue.mixin({
    beforeCreate () {
      if (this.$options.greed) {
        // ... initialize stuff
      }
    }
  })
}

Vue.use(greedPlugin)

new Vue({
  greed: {
    queries,
    mutations
  }
})

You can consult vue-rx which is implemented this way.

Closing since this is a question, but you can continue the discussion in this thread.

[smolinari]

Well, your project sounds interesting. Looking forward to seeing it.

Scott