Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zephraph/vue-graphql-loader
Custom block support for GraphQL operations in Vue's single file components
https://github.com/zephraph/vue-graphql-loader
Last synced: 1 day ago
JSON representation
Custom block support for GraphQL operations in Vue's single file components
- Host: GitHub
- URL: https://github.com/zephraph/vue-graphql-loader
- Owner: zephraph
- License: mit
- Created: 2017-08-31T04:28:14.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-10-06T07:09:35.000Z (almost 5 years ago)
- Last Synced: 2024-04-25T18:03:03.962Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.85 MB
- Stars: 50
- Watchers: 3
- Forks: 0
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-graphql-loader
[](https://travis-ci.org/zephraph/vue-graphql-loader)
[](https://greenkeeper.io/)
[](https://img.shields.io/npm/v/vue-graphql-loader.svg)
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
}
}
export default {
created() {
console.log(
this.$options.query,
this.$options.mutation,
this.$options.subscription
);
}
};
```
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
}
export default {
created() {
console.log(this.$options.query.TestQuery);
}
};
```
It's highly recommended that you only use named operations.