npm

Need private packages and team management tools?Check out npm Orgs. »

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

155

version

3.0.0-alpha

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability