Use decorators to create Vue Apollo smart queries

Overview

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/[email protected]"></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

You might also like...
local storage decorator and helper function in Vue

Vue Local Storage Decorator This library fully depends on vue-class-component. Description It persists the component data by using local storage Licen

this is vue decorator utils

Vue Corator Update @Render: add functional atturibute in component 2019/08/23 @Style: Style tag changed global to scoped 2019/08/22 @Hoc : high order

Generate TypeScript declaration files for .vue files

vuedts This repository is fork from https://github.com/ktsn/vuetype Because that repository has not maintained now. Generate TypeScript declaration fi

vue-props-type - Helps to define the props type.

Vue Props Type (Translated by DeepL The Vue Props Type helps to define the props type in Vue.js. Why If you want to use composition-api, you need to w

Vue 3 + TypeScript + TailwindCss Components Library UI

How To npm install tailpieces or yarn add tailpieces Add tailpieces to purge Road Map Add tests to project Add translations to classes and components

Vue, Nodejs, Mongodb con Typescript

MEVN with Typescript Requeriments To execute this project you need Mongodb installed and running. Installation of the project Execute the following co

Official Genesis website written in Vue

Welcome to Genesis 👋 Cause it all started with curiosity 🏠 Homepage ✨ Demo Install npm install Usage npm start Author 👤 Mateusz Słotwiński Website:

Using highcharts with Vue and TypeScript

highcharts Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints and

Test vue typescript - Hotel views
Test vue typescript - Hotel views

vue test https://test-vue-typescript.vercel.app/ Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minif

Owner
stefanwimmer128
Web Developer (in apprenticeship) and anime/manga/cartoon/book-enthusiast.
stefanwimmer128
[DEPRECATED] Decorators to use TypeScript classes as Vue.js 2.0 components

❄️ DEPRECATION NOTICE ❄️ Official TypeScript support has been added to Vue.js 2.x and the old bindings have been changed considerably since this repos

Locoslab GmbH 26 Aug 6, 2021
Sets of ECMAScript / Typescript decorators that helps you write Vue component easily.

VueTyped VueTyped contains sets of ECMAScript / Typescript decorators that helps you write Vue component easily. What is this for? Normaly you wrote V

vue-typed 102 Nov 10, 2022
Typescript decorators to make vue feel more typescripty

vue-typescript Typescript decorators to make vue play nice with typescript Why do i need this? I built this mostly to remove the red squiggles on VSCo

Francis O'Brien 361 Nov 11, 2022
Typescript class decorators for vuex modules

vuex-class-modules This is yet another package to introduce a simple type-safe class style syntax for your vuex modules, inspired by vue-class-compone

null 191 Dec 26, 2022
Vue 3 Typescript example with Axios: CRUD application with Vue Router

Vue 3 Typescript example with Axios & Vue Router: Build CRUD App Build a Vue.js 3 Typescript example to consume REST APIs, display and modify data usi

null 67 Dec 15, 2022
Vue 3 Typescript example with Axios & Vue Router: Build CRUD App

Vue 3 Typescript example with Axios & Vue Router: Build CRUD App Build a Vue.js 3 Typescript example to consume REST APIs, display and modify data usi

JS-IT 5 Oct 24, 2022
Vue.js and Property Decorator

Vue Property Decorator This library fully depends on vue-class-component, so please read its README before using this library. License MIT License Ins

null 5.5k Jan 3, 2023
TypeScript declaration file that allows using 'import' with *.vue files

vue-typescript-import-dts TypeScript declaration file that allows using import with *.vue files. The primary use case is a bundler environment like we

Locoslab GmbH 28 Feb 23, 2022
Type-check your script in your vue-loader

TypeScript loader for Vue-loader Type-check your script in your Vue-loader. Easier importing .ts file in vue's SFC. Getting Started Tutorials and exam

Herrington Darkholme 88 Jul 19, 2022
Typescript decorator for Vue mixins

Vue Mixin Decorator This library fully depends on vue-class-component. Most ideas and code are stolen borrowed from @HerringtonDarkholme and his av-ts

Rhys Lloyd 56 Nov 20, 2022