Custom block support for GraphQL operations in Vue's single file components
MIT License
Adds support for build time compilation of <graphql>
blocks within Vue single file components.
Configure this package as a custom loader for the graphql
block in vue-loader
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
}
}
]
}
]
}
};
Anonymous Operations
Anonymous queries, mutations, and subscriptions are stored on this.$query, this.$mutation, and this.$subscription respectively.
<graphql>
{
greetings
}
mutation {
doSomething(test: true) {
blah
}
}
subscription {
someFeed() {
name
}
}
</graphql>
<script>
export default {
created() {
console.log(
this.$options.query,
this.$options.mutation,
this.$options.subscription
);
}
};
</script>
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.
<graphql>
query TestQuery {
test
}
</graphql>
<script>
export default {
created() {
console.log(this.$options.query.TestQuery);
}
};
</script>
It's highly recommended that you only use named operations.