Vue GraphQL Models

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

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.