Vue GraphQL Inject

A simple way to use your GraphQL operations in a type-safe way with Vue! It uses graphql-code-generator to generate the types.

Quick start

This package requires graphql-code-generator. If you haven't already, install it and create a new config. Here is a guide on how to do that.

As soon as you're ready you can continue to setup this package. First of all you need to install it with your preferred package manager.

The graphql-code-generator plugin can be found under vue-graphql-inject/lib/codegen. You may add a new output file specifically for this plugin. For example:

schema: "http://localhost:3000/graphql"
documents: "**/*.graphql"
generates:
  src/generated/graphql-inject.ts:
    - "vue-graphql-inject/lib/codegen"

The next step is to add the Vue plugin:

import Vue from 'vue'
import { VueGraphQLInject } from 'vue-graphql-inject/lib/vue'
import { GraphQLInjectDefinition } from './generated/graphql-inject.ts'
 
Vue.use(VueGraphQLInject, { definition: GraphQLInjectDefinition })

Congratulations, you're now read to get started! Now you can use the following code in your Vue components:

// For mutations:
this.$gql().mutations.UpdateUser
 
// For quries:
this.$gql().queries.GetUser

Install

With NPM:

$ npm install vue-graphl-inject

With Yarn:

$ yarn add vue-graphql-inject