Novel Personal Mantras

    vue-graphql-models

    3.0.0-alpha • Public • Published

    Vue GraphQL Models

    Universal library which helps to build OOP-driven GraphQL based models for Vue components. Influenced by Laravel Eloquent Models & Collections.

    npm GitHub stars Travis codecov GitHub license

    Note. If you looking for v1 of this library, switch to a relevant branch.

    Features

    • BaseModel is a class which acts as a base entity for your models extending this class.
    • Full encapsulation of GraphQL queries & mutations. No need to call them manually, all you need is to call you Model's methods.
    • All arrays retrieved from GraphQL will be hydrated with respectful collections of models.
    • Supports lazy-loading of GraphQL documents.
    • Supports events & hooks for customization.
    Internally:
    • Webpack 4 based.
    • ES6 as a source.
    • Exports in a umd format so library works everywhere.
    • ES6 test setup with Mocha and Chai.
    • Linting with ESLint.

    Installation

    npm i vue-graphql-models -S

    or

    yarn add vue-graphql-models

    Configuration

    import VueGraphqlModels from 'vue-graphql-models';
    
    Vue.use(VueGraphqlModels);
    

    Documentation

    Basic Usage

    1. Define your model:

    import { BaseModel } from 'vue-graphql-models';
    
    export default class Fruit extends BaseModel {
     // Your additional logic, if needed
     //   ...or just empty class
    }
    

    2. Use it in your component:

    <template>
       <ul>
         <li v-if="model.loading">Loading...</li>
         <li v-else-if="model.error">Loading Failed!</li>
         <li v-else v-for="(item, index) in model.results.all()" :key="index">
           <p>Name: {{ item.name }}</p>
           <p>Color: {{ item.color }}</p>
         </li>
      </ul>
    </template>
    
    <script>
    import Fruit from '@/models/Fruit';
    
    export default {
      data: () => ({
        model: new Fruit(),
      }),
    
      created() {
        this.model.get();
      },
    }
    </script>
    

    Full Documentation

    Contribution

    Feel free to submit your pull-requests, ideas, proposals and bug reports!

    TODOs:

    • Add dynamic query/mutation building based on model attributes w/o need to create .graphql files at all
    • Make collections optional to make library more lightweight
    • Rewrite to TypeScript
    • Add subscriptions & events example
    • Write more tests & coverage support
    • Add model versioning support
    • Add a configurable operation confirmation when performing some risky operations. For example, automatically display a delete confirmation component when executing .delete() method.

    Install

    npm i vue-graphql-models

    DownloadsWeekly Downloads

    20

    Version

    3.0.0-alpha

    License

    MIT

    Unpacked Size

    2.13 MB

    Total Files

    35

    Last publish

    Collaborators

    • matrunchyk