Vue Apollo Decorators
Use decorators to create Vue Apollo smart queries
Documentation
Install
yarn add vue-apollo-decorators
npm i vue-apollo-decorators
<script src="https://unpkg.com/vue-apollo-decorators@2.0.0"></script>
Usage
There is currently 1 decorator.
@SmartQuery(options: DocumentNode | VueApolloQueryDefinition)
decorator
import gql from "graphql-tag";
import { SmartQuery } from "vue-apollo-decorator";
import { Vue, Component } from "vue-property-decorator";
@Component
export default class YourComponent extends Vue {
@SmartQuery<YourComponent, Todo.Query, Todo.Variables>({
query: gql`
query Todo($id: String!) {
todo(id: $id) {
id
title
}
}
`,
variables() {
return {
id: this.id,
};
},
})
todo: Todo;
id: number = 0;
}
is equivalent to
export default {
apollo: {
todo: {
query: gql`
query Todo($id: String!) {
todo(id: $id) {
id
title
}
}
`,
variables() {
return {
id: this.id,
};
},
},
},
};
@SubscribeToMore(options: SubscribeToMoreOptions)
decorator
import gql from "graphql-tag";
import { SmartQuery, SubscribeToMore } from "vue-apollo-decorator";
import { Vue, Component } from "vue-property-decorator";
@Component
export default class YourComponent extends Vue {
@SmartQuery(gql`{ todos { id, title } }`) todo: Todo;
@SubscribeToMore({
document: gql`
subscription TodoSubscription {
todo {
id,
title,
}
}
`,
updateQuery(prevData, { subscriptionData }) {
return [...prevData, ...subscriptionData];
},
})
todos: Todo;
}
is equivalent to
export default {
apollo: {
todos: {
query: gql`{ todos { id, title } }`,
subscribeToMore: [
{
document: gql`
subscription TodoSubscription {
todo {
id
title
}
}
`,
updateQuery(prevData, { subscriptionData }) {
return [...prevData, ...subscriptionData];
},
},
],
},
},
};
License
ISC License