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
• @SubscribeToMore

@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