Merge pull request #491 from hamiltoes/feature/use-get-lazy

fix: useGet lazy

Author: marshallswain

docs/composition-api.md

@@ -281,7 +281,7 @@ And here's a look at each individual property:
 - `params` is a FeathersJS Params object OR a Composition API `ref` (or `computed`, since they return a `ref` instance) which returns a Params object.
   - Unlike the `useFind` utility, `useGet` does not currently have built-in debouncing.
 - `queryWhen` must be a `computed` property which returns a `boolean`. It provides a logical separation for preventing API requests apart from `null` in the `id`.
-- `lazy`, which is `true` by default, determines if the internal `watch` should fire immediately.  By default a single query will be performed, independent of the watchers.  Set `lazy: false` and the watchers on the `id` and `params` will fire immediately (currently this will cause duplicate queries to be performed, so it's not recommended).
+- `lazy`, which is `false` by default, determines if the internal `watch` should fire immediately.  Set `lazy: true` and the query will not fire immediately.  It will only fire on subsequent changes to the `id` or `params`.
 
 ### Returned Attributes
 

src/useGet.ts

@@ -46,7 +46,7 @@ export default function get(options: UseGetOptions): UseGetData {
     params: null,
     queryWhen: computed((): boolean => true),
     local: false,
-    lazy: true
+    lazy: false
   }
   const { model, id, params, queryWhen, local, lazy } = Object.assign(
     {},
@@ -112,25 +112,16 @@ export default function get(options: UseGetOptions): UseGetData {
     }
   }
 
-  watch(
+  watch([
     () => getId(),
-    id => {
-      get(id, getParams())
-    },
-    { lazy }
-  )
-  watch(
     () => getParams(),
-    params => {
-      get(getId(), params)
+  ],
+    ([id, params]) => {
+      get(id as string | number, params as Params)
     },
     { lazy }
   )
 
-  if (lazy) {
-    get(id, getParams())
-  }
-
   return {
     servicePath,
     ...toRefs(state),

test/use/get.test.ts

@@ -18,6 +18,7 @@ import Vuex from 'vuex'
 import { mount, shallowMount } from '@vue/test-utils'
 import InstrumentComponent from './InstrumentComponent'
 import { computed, isRef } from '@vue/composition-api'
+import { HookContext } from '@feathersjs/feathers'
 jsdom()
 require('events').EventEmitter.prototype._maxListeners = 100
 
@@ -130,7 +131,7 @@ describe('use/get', function() {
     const { Instrument } = makeContext()
 
     const id = null
-    const instrumentData = useGet({ model: Instrument, id, lazy: true })
+    const instrumentData = useGet({ model: Instrument, id })
     const { hasBeenRequested } = instrumentData
 
     assert(isRef(hasBeenRequested))
@@ -151,4 +152,42 @@ describe('use/get', function() {
 
     assert(hasBeenRequested.value === false, 'no request after get')
   })
+
+  it('API only hit once on initial render', async function() {
+    const { makeServicePlugin, BaseModel } = feathersVuex(feathersClient, {
+      serverAlias: 'useGet'
+    })
+
+    class Dohickey extends BaseModel {
+      public static modelName = 'Dohickey'
+    }
+
+    const servicePath = 'dohickies'
+    const store = new Vuex.Store({
+      plugins: [
+        makeServicePlugin({
+          Model: Dohickey,
+          servicePath,
+          service: feathersClient.service(servicePath)
+        })
+      ]
+    })
+
+    let getCalls = 0
+    feathersClient.service(servicePath).hooks({
+      before: {
+        get: [
+          (ctx: HookContext) => {
+            getCalls += 1
+            ctx.result = { id: ctx.id }
+          }
+        ]
+      }
+    })
+
+    useGet({ model: Dohickey, id: 42 })
+    await new Promise(resolve => setTimeout(resolve, 100))
+
+    assert(getCalls === 1, '`get` called once')
+  })
 })