Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matrunchyk/vue-graphql
Warning! Library migrated to vue-oop and is a part of it!
https://github.com/matrunchyk/vue-graphql
collections commonjs eloquent eloquent-models es6 graphql graphql-client models oop orm umd universal vue webpack4
Last synced: 3 days ago
JSON representation
Warning! Library migrated to vue-oop and is a part of it!
- Host: GitHub
- URL: https://github.com/matrunchyk/vue-graphql
- Owner: matrunchyk
- License: mit
- Archived: true
- Created: 2018-10-11T09:49:17.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-02T08:03:36.000Z (over 5 years ago)
- Last Synced: 2024-09-17T22:06:19.553Z (4 months ago)
- Topics: collections, commonjs, eloquent, eloquent-models, es6, graphql, graphql-client, models, oop, orm, umd, universal, vue, webpack4
- Language: JavaScript
- Homepage: https://github.com/matrunchyk/vue-oop
- Size: 2.23 MB
- Stars: 7
- Watchers: 3
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DEPRECATED
Migrated to [vue-opp](https://github.com/matrunchyk/vue-oop) as a part of it! :tada:
# Vue GraphQL Models
Universal library which helps to build OOP-driven GraphQL based models for Vue components.
Influenced by Laravel Eloquent Models & Collections.
[](https://www.npmjs.com/package/vue-graphql-models) [](https://github.com/digitalideastudio/vue-graphql-models/stargazers)
 [](https://codecov.io/gh/digitalideastudio/vue-graphql-models) [](https://github.com/digitalideastudio/vue-graphql-models/blob/master/LICENSE)
_Note. If you looking for v1 of this library, switch to a [relevant branch](https://github.com/digitalideastudio/vue-graphql-models/tree/v1)._
## 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](https://github.com/umdjs/umd) format so library works everywhere.
* ES6 test setup with [Mocha](http://mochajs.org/) and [Chai](http://chaijs.com/).
* Linting with [ESLint](http://eslint.org/).
## 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:
```
- Loading...
- Loading Failed!
-
Name: {{ item.name }}
Color: {{ item.color }}
import Fruit from '@/models/Fruit';
export default {
data: () => ({
model: new Fruit(),
}),
created() {
this.model.get();
},
}
```
####[Full Documentation](https://digitalideastudio.github.io/vue-graphql-models/#/)
## 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.