fix: Make sure mutations target the reacetive proxy observed by Vue

GenericModel's methods like $get where mutating the internal #proxy
object which meant Vue could not observe these changes.

By binding GenericModel's methods to the receiver instance and mutating
these directly Vue can pick up on these changes. This reflects the
behavior of GenericCollection.

Resolves #727

Author: DutchGerman

src/GenericModel.js

@@ -19,8 +19,10 @@ class GenericModel {
         return Reflect.deleteProperty(target, propertyKey)
       },
       get: (target, propertyKey, receiver) => {
-        if (propertyKey === 'constructor' || Reflect.ownKeys(this).includes(propertyKey)) {
+        if (propertyKey === 'constructor') {
           return Reflect.get(this, propertyKey, this)
+        } else if (Reflect.ownKeys(this).includes(propertyKey)) {
+          return Reflect.get(this, propertyKey, this).bind(this, receiver)
         }
         return Reflect.get(target, propertyKey, receiver)
       },
@@ -34,7 +36,7 @@ class GenericModel {
     })
   }
 
-  async #request ({ method, keepChanges = false, needsQuery = true }, signal, opts, ...data) {
+  async #request (receiver, { method, keepChanges = false, needsQuery = true }, signal, opts, ...data) {
     await this.#options.route.$ready
     const { columns, ...options } = opts
 
@@ -79,37 +81,37 @@ class GenericModel {
     // TODO: do we need to delete missing keys?
     if (keepChanges) {
       const diff = this.#proxy[$diff]
-      Object.entries(body).forEach(([key, value]) => { this.#proxy[key] = value })
+      Object.entries(body).forEach(([key, value]) => { receiver[key] = value })
       this.#proxy[$freeze]()
-      Object.entries(diff).forEach(([key, value]) => { this.#proxy[key] = value })
+      Object.entries(diff).forEach(([key, value]) => { receiver[key] = value })
     } else {
-      Object.entries(body).forEach(([key, value]) => { this.#proxy[key] = value })
+      Object.entries(body).forEach(([key, value]) => { receiver[key] = value })
       this.#proxy[$freeze]()
     }
     return body
   }
 
-  $get = new ObservableFunction(async (signal, opts = {}) => {
+  $get = new ObservableFunction(async (receiver, signal, opts = {}) => {
     const { keepChanges, ...options } = opts
-    return this.#request({ method: 'get', keepChanges }, signal, options)
+    return this.#request(receiver, { method: 'get', keepChanges }, signal, options)
   })
 
-  $post = new ObservableFunction(async (signal, opts = {}) => {
+  $post = new ObservableFunction(async (receiver, signal, opts = {}) => {
     const options = { return: 'representation', ...opts }
-    const body = await this.#request({ method: 'post', needsQuery: false }, signal, options, this.#proxy)
+    const body = await this.#request(receiver, { method: 'post', needsQuery: false }, signal, options, this.#proxy)
     if (body) {
       // we need to make sure the query is updated with the primary key
       this.#options.query = createPKQuery(this.#options.route.pks, mapAliasesFromSelect(this.#options.query?.select, body))
     }
     return body
   })
 
-  $put = new ObservableFunction(async (signal, opts) => {
+  $put = new ObservableFunction(async (receiver, signal, opts) => {
     const options = { return: 'representation', ...opts }
-    return this.#request({ method: 'put' }, signal, options, this.#proxy)
+    return this.#request(receiver, { method: 'put' }, signal, options, this.#proxy)
   })
 
-  $patch = new ObservableFunction(async (signal, opts, data = {}) => {
+  $patch = new ObservableFunction(async (receiver, signal, opts, data = {}) => {
     const options = { return: 'representation', ...opts }
 
     if (!data || typeof data !== 'object') {
@@ -126,11 +128,11 @@ class GenericModel {
       return this.#proxy
     }
 
-    return this.#request({ method: 'patch' }, signal, options, patchData)
+    return this.#request(receiver, { method: 'patch' }, signal, options, patchData)
   })
 
-  $delete = new ObservableFunction(async (signal, options = {}) => {
-    return this.#request({ method: 'delete' }, signal, options)
+  $delete = new ObservableFunction(async (receiver, signal, options = {}) => {
+    return this.#request(receiver, { method: 'delete' }, signal, options)
   })
 }
 

tests/unit/mixin.spec.js

@@ -296,20 +296,80 @@ describe('Mixin', () => {
   })
 
   describe('reactivity', () => {
-    beforeEach(() => {
+    it('keeps pg when single is changed to same semantics', async () => {
       wrapper = shallowMount(Component, {
         global: {
           plugins: [[Postgrest, { apiRoot: '/api' }]]
         }
       })
-    })
 
-    it('keeps pg when single is changed to same semantics', async () => {
       await flushPromises()
       const pgBefore = wrapper.vm.pg
       wrapper.vm.pgConfig.single = undefined
       await flushPromises()
       expect(wrapper.vm.pg).toBe(pgBefore)
     })
+
+    it('creates a reactive pg GenericCollection', async () => {
+      wrapper = shallowMount(
+        {
+          template: '<pre>{{ pg }}</pre>',
+          mixins: [pg],
+          data () {
+            return { pgConfig: { route: 'clients', query: { select: ['*'], single: false } } }
+          }
+        },
+        { global: { plugins: [[Postgrest, { apiRoot: '/api' }]] } }
+      )
+
+      expect(wrapper.vm.pg).toEqual([])
+      expect(wrapper.html()).toBe('<pre>[]</pre>')
+
+      await flushPromises()
+
+      expect(wrapper.vm.pg).toEqual([{ id: 1, name: 'Test Client 1' }, { id: 2, name: 'Test Client 2' }, { id: 3, name: 'Test Client 3' }])
+      expect(wrapper.html()).toMatchInlineSnapshot(`
+        "<pre>[
+          {
+            "id": 1,
+            "name": "Test Client 1"
+          },
+          {
+            "id": 2,
+            "name": "Test Client 2"
+          },
+          {
+            "id": 3,
+            "name": "Test Client 3"
+          }
+        ]</pre>"
+      `)
+    })
+
+    it('creates a reactive pg GenericModel', async () => {
+      wrapper = shallowMount(
+        {
+          template: '<pre>{{ pg }}</pre>',
+          mixins: [pg],
+          data () {
+            return { pgConfig: { route: 'clients', query: { select: ['*'], id: 'eq.1' }, single: true } }
+          }
+        },
+        { global: { plugins: [[Postgrest, { apiRoot: '/api' }]] } }
+      )
+
+      expect(wrapper.vm.pg).toEqual({})
+      expect(wrapper.html()).toBe('<pre>{}</pre>')
+
+      await flushPromises()
+
+      expect(wrapper.vm.pg).toEqual({ id: 1, name: 'Test Client 1' })
+      expect(wrapper.html()).toMatchInlineSnapshot(`
+"<pre>{
+  "id": 1,
+  "name": "Test Client 1"
+}</pre>"
+`)
+    })
   })
 })