JSPM

vue-graphql-inject

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q18619F
  • License Apache-2.0

Package Exports

  • vue-graphql-inject

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-graphql-inject) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue GraphQL Inject

build npm npm type definitions

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