vue-graphql-loader


Adds support for build time compilation of blocks within Vue single file components.

Installation

Configure this package as a custom loader for the graphql block in vue-loader

``javascript
module.exports = {
// ...probably more stuff here
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
resourceQuery: /blockType=graphql/,
use: [
{
loader: require.resolve('vue-graphql-loader'),
options: {
// Allow or disallow anonymous queries, mutations, etc. Defaults to true.
noAnonymousOperations: true
}
}
]
}
]
}
};
`

Usage

Anonymous Operations

Anonymous queries, mutations, and subscriptions are stored on this.$query, this.$mutation, and this.$subscription respectively.

`vue

{
greetings
}
mutation {
doSomething(test: true) {
blah
}
}
subscription {
someFeed() {
name
}
}



`

When an anonymous operation is present, it's the only operation of that type allowed for the component. That means if there's an anonymous query present, that's the only query that can be included in the component.

Named Operations

Named operations are stored as an object the type's Vue namespace.

`vue

query TestQuery {
test
}



``

It's highly recommended that you only use named operations.