vue-api-query - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

build/Model.js

@@ -104,2 +104,10 @@ 'use strict';
     value: function endpoint() {
+      if (this._fromResource) {
+        if (this.hasId()) {
+          return this._fromResource + '/' + this.id;
+        } else {
+          return this._fromResource;
+        }
+      }
+
       if (this.hasId()) {
@@ -215,9 +223,3 @@ return this.baseURL() + '/' + this.resource() + '/' + this.id;
       }).then(function (response) {
-        var item = new _this2.constructor(response.data);
-        delete item._builder;
-        delete item._fromResource;
-        delete item._customResource;
-        delete item.$http;
-
-        return item;
+        return new _this2.constructor(response.data);
       });
@@ -243,6 +245,5 @@ }
           var item = new _this3.constructor(c);
-          delete item._builder;
-          delete item._fromResource;
-          delete item._customResource;
-          delete item.$http;
+          Object.defineProperty(item, '_fromResource', { get: function get() {
+              return _this3._fromResource;
+            } });
 
@@ -265,11 +266,3 @@ return item;
       return this.get().then(function (response) {
-        var collection = void 0;
-
-        if (response.data) {
-          collection = response.data;
-        } else {
-          collection = response;
-        }
-
-        return collection;
+        return response.data || response;
       });
@@ -279,3 +272,3 @@ }
     /**
-     * CRUD operations
+     * Common CRUD operations
      */
@@ -290,6 +283,4 @@
 
-      var url = this.baseURL() + '/' + this.resource() + '/' + this.id;
-
       return this.request({
-        url: url,
+        url: this.endpoint(),
         method: 'DELETE'
@@ -333,3 +324,30 @@ }).then(function (response) {
     }
+
+    /**
+     * Relationship operations
+     */
+
   }, {
+    key: 'attach',
+    value: function attach(params) {
+      return this.request({
+        method: 'POST',
+        url: this.endpoint(),
+        data: params
+      }).then(function (response) {
+        return response;
+      });
+    }
+  }, {
+    key: 'sync',
+    value: function sync(params) {
+      return this.request({
+        method: 'PUT',
+        url: this.endpoint(),
+        data: params
+      }).then(function (response) {
+        return response;
+      });
+    }
+  }, {
     key: '$http',
@@ -336,0 +354,0 @@ get: function get() {

package.json

 {
   "name": "vue-api-query",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "💎 Elegant and simple way to build requests for REST API",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -82,2 +82,3 @@ <p align="center">
 let post = new Post()
+post.title = 'Another one'
 
@@ -91,3 +92,2 @@ // or
 
-post.title = 'Another one'
 post.save()
@@ -221,2 +221,3 @@ ```
   // computed properties are reactive -> user.fullname
+  // make sure to use "get" prefix 
   get fullname()
@@ -332,21 +333,2 @@ {
 
-Play with relationships:
-
-```js
-// GET /users/1
-let user = await User.find(1)
-
-// GET /users/1/posts
-let posts = await user.posts().get()
-
-// Yes, you can do that before getting the posts
-let posts = await user
-  .posts()
-  .where(...)
-  .append(...)
-  .include(...)
-  .orderBy(...)
-  .get()
-```
-
 You also can do that:
@@ -429,2 +411,52 @@ ```js
 
+# Relationships
+
+```js
+// GET /users/1
+let user = await User.find(1)
+
+// GET /users/1/posts
+let posts = await user.posts().get()
+
+// Yes, you can do that before getting the posts
+let posts = await user
+  .posts()
+  .where(...)
+  .append(...)
+  .include(...)
+  .orderBy(...)
+  .get()
+```
+
+If you like nested relationships ...
+
+```js
+// Pick any comment from list and edit it
+
+this.comments = await this.post.comments()
+let comment = this.comments[0]
+comment.text = 'Changed!'
+
+// PUT /posts/{id_post}/comments/{id_comment}
+
+await comment.save() 
+
+// DELETE /posts/{id_post}/comments/{id_comment}
+
+await comment.delete() 
+```
+
+And just for convenience you can POST or PUT with any payload to backend:
+
+```js
+// POST /posts/{id_post}/comments
+
+await this.posts.comments().attach(payload) 
+
+// PUT /posts/{id_post}/comments
+
+await this.posts.comments().sync(payload) 
+```
+
+
 # Pagination
@@ -439,3 +471,3 @@
         .limit(20)
-        .$get() // sometimes you will prefer $get()
+        .get()
 
@@ -587,5 +619,3 @@ ```
 
-let users = await User
-  .where('status', 'ACTIVE')
-  .$get() // <---- HERE
+let users = await User.$get()
 ```
@@ -592,0 +622,0 @@

src/Model.js

@@ -71,2 +71,10 @@ import Builder from './Builder';
   endpoint () {
+    if (this._fromResource) {
+      if (this.hasId()) {
+        return `${this._fromResource}/${this.id}`
+      } else {
+        return this._fromResource
+      }
+    }
+
     if (this.hasId()) {
@@ -160,9 +168,3 @@ return `${this.baseURL()}/${this.resource()}/${this.id}`
     }).then(response => {
-      let item = new this.constructor(response.data)
-      delete item._builder
-      delete item._fromResource
-      delete item._customResource
-      delete item.$http
-
-      return item
+      return new this.constructor(response.data)
     })
@@ -185,6 +187,4 @@ }
         let item = new this.constructor(c)
-        delete item._builder
-        delete item._fromResource
-        delete item._customResource
-        delete item.$http
+        Object.defineProperty(item, '_fromResource',
+          { get: () => this._fromResource })
 
@@ -206,11 +206,3 @@ return item
     return this.get().then(response => {
-      let collection
-
-      if (response.data) {
-        collection = response.data
-      } else {
-        collection = response
-      }
-
-      return collection
+      return response.data || response
     })
@@ -220,3 +212,3 @@ }
   /**
-   * CRUD operations
+   * Common CRUD operations
    */
@@ -229,6 +221,4 @@
 
-    let url = `${this.baseURL()}/${this.resource()}/${this.id}`
-
     return this.request({
-      url,
+      url: this.endpoint(),
       method: 'DELETE'
@@ -265,2 +255,27 @@ }).then(response => {
   }
+
+  /**
+   * Relationship operations
+   */
+
+  attach (params) {
+    return this.request({
+      method: 'POST',
+      url: this.endpoint(),
+      data: params
+    }).then(response => {
+      return response
+    })
+  }
+
+  sync (params) {
+    return this.request({
+      method: 'PUT',
+      url: this.endpoint(),
+      data: params
+    }).then(response => {
+      return response
+    })
+  }
+
 }

tests/dummy/models/Post.js

 import BaseModel from './BaseModel'
+import Comment from './Comment'
 
 export default class Post extends BaseModel {
-
+  comments () {
+    return this.hasMany(Comment)
+  }
 }

tests/model.test.js

@@ -6,5 +6,6 @@ import Post from './dummy/models/Post'
 import MockAdapter from 'axios-mock-adapter';
-import { Posts as postsArrayResponse } from './dummy/data/array'
-import { Posts as postsArrayEmbedResponse } from './dummy/data/arrayEmbed'
-import { Post as postResponse } from './dummy/data/single'
+import { Posts as postsResponse } from './dummy/data/posts'
+import { Posts as postsEmbedResponse } from './dummy/data/postsEmbed'
+import { Post as postResponse } from './dummy/data/post'
+import { Comments as commentsResponse } from './dummy/data/comments'
 
@@ -32,7 +33,7 @@ describe('Model methods', () => {
     axiosMock.onGet('http://localhost/posts').reply(200, {
-      data: postsArrayResponse
+      data: postsResponse
     })
 
     const post = await Post.first()
-    expect(post).toEqual(postsArrayResponse[0])
+    expect(post).toEqual(postsResponse[0])
     expect(post).toBeInstanceOf(Post)
@@ -57,3 +58,3 @@ })
   test('get() method returns a array of objects as instace of suchModel', async () => {
-    axiosMock.onGet('http://localhost/posts').reply(200, postsArrayResponse)
+    axiosMock.onGet('http://localhost/posts').reply(200, postsResponse)
 
@@ -68,7 +69,7 @@ const posts = await Post.get()
   test('$get() fetch style request with "data" attribute', async () => {
-    axiosMock.onGet('http://localhost/posts').reply(200, postsArrayEmbedResponse)
+    axiosMock.onGet('http://localhost/posts').reply(200, postsEmbedResponse)
 
     const posts = await Post.$get()
 
-    expect(posts).toEqual(postsArrayEmbedResponse.data)
+    expect(posts).toEqual(postsEmbedResponse.data)
 
@@ -78,7 +79,7 @@ })
   test('$get() fetch style request without "data" attribute', async () => {
-    axiosMock.onGet('http://localhost/posts').reply(200, postsArrayEmbedResponse.data)
+    axiosMock.onGet('http://localhost/posts').reply(200, postsEmbedResponse.data)
 
     const posts = await Post.$get()
 
-    expect(posts).toEqual(postsArrayEmbedResponse.data)
+    expect(posts).toEqual(postsEmbedResponse.data)
 
@@ -119,2 +120,21 @@ })
 
+  test('save() method makes a PUT request when ID of object exists (nested object)', async () => {
+    let comment
+
+    axiosMock.onGet('http://localhost/posts/1/comments').reply(200, commentsResponse)
+
+    axiosMock.onPut().reply((config) => {
+      expect(config.method).toEqual('put')
+      expect(config.data).toEqual(JSON.stringify(comment))
+      expect(config.url).toEqual('http://localhost/posts/1/comments/1')
+
+      return [200, {}]
+    })
+
+    const post = new Post({ id: 1 })
+    comment = await post.comments().first()
+    comment.text = 'Owh!'
+    comment.save()
+  })
+
   test('a request from delete() method hits the right resource', async () => {
@@ -144,2 +164,17 @@
 
+  test('a request from delete() method hits the right resource (nested object)', async () => {
+    axiosMock.onGet('http://localhost/posts/1/comments').reply(200, commentsResponse)
+
+    axiosMock.onDelete().reply((config) => {
+      expect(config.method).toEqual('delete')
+      expect(config.url).toBe('http://localhost/posts/1/comments/1')
+
+      return [200, {}]
+    })
+
+    const post = new Post({ id: 1 })
+    const comment = await post.comments().first()
+    comment.delete()
+  })
+
   test('a request with custom() method hits the right resource', async () => {
@@ -173,3 +208,3 @@
 
-    axiosMock.onGet('http://localhost/users/1/posts').reply(200, postsArrayResponse)
+    axiosMock.onGet('http://localhost/users/1/posts').reply(200, postsResponse)
 
@@ -183,2 +218,34 @@ const user = new User({ id: 1 })
   })
+
+  test('attach() method hits right endpoint with a POST request', async () => {
+    let comment
+
+    axiosMock.onPost().reply((config) => {
+      expect(config.method).toEqual('post')
+      expect(config.data).toEqual(JSON.stringify(comment))
+      expect(config.url).toEqual('http://localhost/posts/1/comments')
+
+      return [200, {}]
+    })
+
+    const post = new Post({ id: 1 })
+    comment = { text: 'hi!' }
+    let response = post.comments().attach(comment)
+  })
+
+  test('sync() method hits right endpoint with a PUT request', async () => {
+    let comment
+
+    axiosMock.onPut().reply((config) => {
+      expect(config.method).toEqual('put')
+      expect(config.data).toEqual(JSON.stringify(comment))
+      expect(config.url).toEqual('http://localhost/posts/1/comments')
+
+      return [200, {}]
+    })
+
+    const post = new Post({ id: 1 })
+    comment = { text: 'hi!' }
+    let response = post.comments().sync(comment)
+  })
 })

No alert changes

Improved metrics

Total package byte prevSize

215945

1.62%

Number of package files

31

6.9%

Lines of code

1571

6.8%

Number of lines in readme file

654

4.81%

No dependency changes