Skip to content

Commit 383a350

Browse files
marshallswainmarshallswain
committed
Replace lazy with immediate in composition api watch
1 parent 0593510 commit 383a350

File tree

8 files changed

+59
-53
lines changed

8 files changed

+59
-53
lines changed

‎.vscode/settings.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,8 @@
1515
"activityBar.background": "#2B3011",
1616
"titleBar.activeBackground": "#3C4418",
1717
"titleBar.activeForeground": "#FAFBF4"
18-
}
18+
},
19+
"editor.defaultFormatter": "esbenp.prettier-vscode",
20+
"prettier.arrowParens": "avoid",
21+
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false
1922
}

‎docs/composition-api.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ interface UseFindOptions {
105105
fetchParams?: Params | Ref<Params>
106106
queryWhen?: Ref<Function>
107107
qid?: string
108-
lazy?: boolean
108+
immediate?: boolean
109109
}
110110
```
111111

@@ -123,7 +123,7 @@ And here's a look at each individual property:
123123
- Explicitly returning `null` will prevent an API request from being made.
124124
- `queryWhen` must be a `computed` property which returns a `boolean`. It provides a logical separation for preventing API requests *outside* of the `params`.
125125
- `qid` allows you to specify a query identifier (used in the pagination data in the store). This can also be set dynamically by returning a `qid` in the params.
126-
- `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 params.
126+
- `immediate`, which is `true` by default, determines if the internal `watch` should fire immediately. Set `immediate: false` and the query will not fire immediately. It will only fire on subsequent changes to the params.
127127

128128
### Returned Attributes
129129

@@ -208,7 +208,7 @@ If you have already used the `makeFindMixin`, the `useFind` composition function
208208

209209
1. `useFind` is more TypeScript friendly. Since the mixins depended on adding dynamic attribute names that wouldn't overlap, TypeScript tooling and autocomplete weren't very effective. The attributes returned from `useFind` are always consistent.
210210
1. Instead of providing a service name, you provide a service Model from the `$FeathersVuex` Vue plugin.
211-
1. The default behavior of `useFind` is to immediately query the API server. The `makeFindMixin`, by default, would wait until the watcher noticed the change. This is to match the default behavior of `watch` in the Vue Composition API. You can pass `{ lazy: true }` in the `useFind` options, which will be passed directly to the internal `watch` on the params.
211+
1. The default behavior of `useFind` is to immediately query the API server. The `makeFindMixin`, by default, would wait until the watcher noticed the change. This is to match the default behavior of `watch` in the Vue Composition API. You can pass `{ immediate: false }` in the `useFind` options, which will be passed directly to the internal `watch` on the params.
212212

213213
Note that with the Vue Options API (aka the only way to write components in Vue 2.0) the models are found in `this.$FeathersVuex`. With the Vue Composition API, this object is now at `context.root.$FeathersVuex`.
214214

@@ -268,7 +268,7 @@ interface UseGetOptions {
268268
params?: Params | Ref<Params>
269269
queryWhen?: Ref<Function>
270270
local?: boolean
271-
lazy?: boolean
271+
immediate?: boolean
272272
}
273273
```
274274
@@ -281,7 +281,7 @@ And here's a look at each individual property:
281281
- `params` is a FeathersJS Params object OR a Composition API `ref` (or `computed`, since they return a `ref` instance) which returns a Params object.
282282
- Unlike the `useFind` utility, `useGet` does not currently have built-in debouncing.
283283
- `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`.
284-
- `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`.
284+
- `immediate`, which is `true` by default, determines if the internal `watch` should fire immediately. Set `immediate: false` and the query will not fire immediately. It will only fire on subsequent changes to the `id` or `params`.
285285
286286
### Returned Attributes
287287

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@
108108
"lib": "lib"
109109
},
110110
"peerDependencies": {
111-
"@vue/composition-api": "^0.5.0"
111+
"@vue/composition-api": "^0.6.1"
112112
},
113113
"dependencies": {
114114
"@feathersjs/adapter-commons": "^4.5.2",
@@ -146,7 +146,7 @@
146146
"@types/mocha": "^7.0.2",
147147
"@typescript-eslint/eslint-plugin": "^2.31.0",
148148
"@typescript-eslint/parser": "^2.31.0",
149-
"@vue/composition-api": "^0.5.0",
149+
"@vue/composition-api": "^0.6.1",
150150
"@vue/eslint-config-prettier": "^6.0.0",
151151
"@vue/eslint-config-typescript": "^5.0.2",
152152
"@vue/test-utils": "^1.0.2",

‎src/useFind.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ interface UseFindOptions {
2020
queryWhen?: Ref<Function>
2121
qid?: string
2222
local?: boolean
23-
lazy?: boolean
23+
immediate?: boolean
2424
}
2525
interface UseFindState {
2626
debounceTime: null | number
@@ -57,9 +57,9 @@ export default function find(options: UseFindOptions): UseFindData {
5757
qid: 'default',
5858
queryWhen: computed((): boolean => true),
5959
local: false,
60-
lazy: false
60+
immediate: true
6161
}
62-
const { model, params, queryWhen, qid, local, lazy } = Object.assign(
62+
const { model, params, queryWhen, qid, local, immediate } = Object.assign(
6363
{},
6464
defaults,
6565
options
@@ -128,7 +128,7 @@ export default function find(options: UseFindOptions): UseFindData {
128128
state.isPending = true
129129
state.haveBeenRequested = true
130130

131-
return model.find(params).then(response => {
131+
return model.find(params).then((response) => {
132132
// To prevent thrashing, only clear error on response, not on initial request.
133133
state.error = null
134134
state.haveLoaded = true
@@ -169,7 +169,7 @@ export default function find(options: UseFindOptions): UseFindData {
169169
() => {
170170
findProxy()
171171
},
172-
{ lazy }
172+
{ immediate }
173173
)
174174

175175
return {

‎src/useGet.ts

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ interface UseGetOptions {
1818
params?: Params | Ref<Params>
1919
queryWhen?: Ref<Function>
2020
local?: boolean
21-
lazy?: boolean
21+
immediate?: boolean
2222
}
2323
interface UseGetState {
2424
item: Ref<any>
@@ -46,9 +46,9 @@ export default function get(options: UseGetOptions): UseGetData {
4646
params: null,
4747
queryWhen: computed((): boolean => true),
4848
local: false,
49-
lazy: false
49+
immediate: true
5050
}
51-
const { model, id, params, queryWhen, local, lazy } = Object.assign(
51+
const { model, id, params, queryWhen, local, immediate } = Object.assign(
5252
{},
5353
defaults,
5454
options
@@ -112,14 +112,12 @@ export default function get(options: UseGetOptions): UseGetData {
112112
}
113113
}
114114

115-
watch([
116-
() => getId(),
117-
() => getParams(),
118-
],
115+
watch(
116+
[() => getId(), () => getParams()],
119117
([id, params]) => {
120118
get(id as string | number, params as Params)
121119
},
122-
{ lazy }
120+
{ immediate }
123121
)
124122

125123
return {

‎test/use/find.test.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ function makeContext() {
4343
return { store, Instrument, BaseModel, makeServicePlugin }
4444
}
4545

46-
describe('use/find', function() {
47-
it('returns correct default data', function() {
46+
describe('use/find', function () {
47+
it('returns correct default data', function () {
4848
const { Instrument } = makeContext()
4949

5050
const instrumentParams = computed(() => {
@@ -106,7 +106,7 @@ describe('use/find', function() {
106106
assert(qid.value === 'default')
107107
})
108108

109-
it('returns correct default data even when params is not reactive', function() {
109+
it('returns correct default data even when params is not reactive', function () {
110110
const { Instrument } = makeContext()
111111

112112
const instrumentsData = useFind({
@@ -165,7 +165,7 @@ describe('use/find', function() {
165165
assert(qid.value === 'default')
166166
})
167167

168-
it('allows passing {lazy:true} to not query immediately', function() {
168+
it('allows passing {immediate:false} to not query immediately', function () {
169169
const { Instrument } = makeContext()
170170

171171
const instrumentParams = computed(() => {
@@ -177,15 +177,15 @@ describe('use/find', function() {
177177
const instrumentsData = useFind({
178178
model: Instrument,
179179
params: instrumentParams,
180-
lazy: true
180+
immediate: false
181181
})
182182
const { haveBeenRequested } = instrumentsData
183183

184184
assert(isRef(haveBeenRequested))
185185
assert(haveBeenRequested.value === false)
186186
})
187187

188-
it('params can return null to prevent the query', function() {
188+
it('params can return null to prevent the query', function () {
189189
const { Instrument } = makeContext()
190190

191191
const instrumentParams = computed(() => {
@@ -194,15 +194,15 @@ describe('use/find', function() {
194194
const instrumentsData = useFind({
195195
model: Instrument,
196196
params: instrumentParams,
197-
lazy: true
197+
immediate: true
198198
})
199199
const { haveBeenRequested } = instrumentsData
200200

201201
assert(isRef(haveBeenRequested))
202202
assert(haveBeenRequested.value === false)
203203
})
204204

205-
it('allows using `local: true` to prevent API calls from being made', function() {
205+
it('allows using `local: true` to prevent API calls from being made', function () {
206206
const { Instrument } = makeContext()
207207

208208
const instrumentParams = computed(() => {

‎test/use/get.test.ts

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,23 @@ import { feathersRestClient as feathersClient } from '../fixtures/feathers-clien
1515
import useGet from '../../src/useGet'
1616
import memory from 'feathers-memory'
1717
import Vuex from 'vuex'
18-
import { mount, shallowMount } from '@vue/test-utils'
19-
import InstrumentComponent from './InstrumentComponent'
20-
import { computed, isRef } from '@vue/composition-api'
18+
// import { mount, shallowMount } from '@vue/test-utils'
19+
// import InstrumentComponent from './InstrumentComponent'
20+
import { isRef } from '@vue/composition-api'
2121
import { HookContext } from '@feathersjs/feathers'
2222
jsdom()
2323
require('events').EventEmitter.prototype._maxListeners = 100
2424

2525
Vue.use(Vuex)
2626
Vue.use(FeathersVuex)
2727

28-
function timeoutPromise(wait = 0) {
29-
return new Promise(resolve => {
30-
setTimeout(() => {
31-
resolve()
32-
}, wait)
33-
})
34-
}
28+
// function timeoutPromise(wait = 0) {
29+
// return new Promise(resolve => {
30+
// setTimeout(() => {
31+
// resolve()
32+
// }, wait)
33+
// })
34+
// }
3535

3636
function makeContext() {
3737
const { makeServicePlugin, BaseModel } = feathersVuex(feathersClient, {
@@ -77,8 +77,8 @@ function makeContext() {
7777
return { store, Instrument, BaseModel, makeServicePlugin }
7878
}
7979

80-
describe('use/get', function() {
81-
it('returns correct default data', function() {
80+
describe('use/get', function () {
81+
it('returns correct default data', function () {
8282
const { Instrument } = makeContext()
8383

8484
const id = 1
@@ -116,18 +116,18 @@ describe('use/get', function() {
116116
assert(item.value === null)
117117
})
118118

119-
it('allows passing {lazy:true} to not query immediately', function() {
119+
it('allows passing {immediate:false} to not query immediately', function () {
120120
const { Instrument } = makeContext()
121121

122122
const id = 1
123-
const instrumentData = useGet({ model: Instrument, id, lazy: true })
123+
const instrumentData = useGet({ model: Instrument, id, immediate: false })
124124
const { hasBeenRequested } = instrumentData
125125

126126
assert(isRef(hasBeenRequested))
127127
assert(hasBeenRequested.value === false)
128128
})
129129

130-
it('id can return null id to prevent the query', function() {
130+
it('id can return null id to prevent the query', function () {
131131
const { Instrument } = makeContext()
132132

133133
const id = null
@@ -138,7 +138,7 @@ describe('use/get', function() {
138138
assert(hasBeenRequested.value === false)
139139
})
140140

141-
it('allows using `local: true` to prevent API calls from being made', function() {
141+
it('allows using `local: true` to prevent API calls from being made', function () {
142142
const { Instrument } = makeContext()
143143

144144
const id = 1
@@ -153,7 +153,7 @@ describe('use/get', function() {
153153
assert(hasBeenRequested.value === false, 'no request after get')
154154
})
155155

156-
it('API only hit once on initial render', async function() {
156+
it('API only hit once on initial render', async function () {
157157
const { makeServicePlugin, BaseModel } = feathersVuex(feathersClient, {
158158
serverAlias: 'useGet'
159159
})
@@ -186,7 +186,7 @@ describe('use/get', function() {
186186
})
187187

188188
useGet({ model: Dohickey, id: 42 })
189-
await new Promise(resolve => setTimeout(resolve, 100))
189+
await new Promise((resolve) => setTimeout(resolve, 100))
190190

191191
assert(getCalls === 1, '`get` called once')
192192
})

‎yarn.lock

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1240,12 +1240,12 @@
12401240
source-map "~0.6.1"
12411241
vue-template-es2015-compiler "^1.9.0"
12421242

1243-
"@vue/composition-api@^0.5.0":
1244-
version "0.5.0"
1245-
resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.5.0.tgz#2dbaa02a5d1f5d0d407d53d5529fe444aa8362f3"
1246-
integrity sha512-9QDFWq7q839G1CTTaxeruPOTrrVOPSaVipJ2TxxK9QAruePNTHOGbOOFRpc8WLl4YPsu1/c29yBhMVmrXz8BZw==
1243+
"@vue/composition-api@^0.6.1":
1244+
version "0.6.1"
1245+
resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.6.1.tgz#0a32e7d18e4b69912e3547e11d0c85e770de6825"
1246+
integrity sha512-NfP6kiBDXkYWrzFwK9IBem5MQSXMujIl8QDBJuLx0Y/6pwK3PC+F7dFDhja+H03SE6WwLleZASM6+zY3BT3Bkw==
12471247
dependencies:
1248-
tslib "^1.9.3"
1248+
tslib "^2.0.0"
12491249

12501250
"@vue/eslint-config-prettier@^6.0.0":
12511251
version "6.0.0"
@@ -11698,11 +11698,16 @@ ts-node@^8.10.1:
1169811698
source-map-support "^0.5.17"
1169911699
yn "3.1.1"
1170011700

11701-
tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
11701+
tslib@^1.8.1, tslib@^1.9.0:
1170211702
version "1.10.0"
1170311703
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
1170411704
integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
1170511705

11706+
tslib@^2.0.0:
11707+
version "2.0.0"
11708+
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
11709+
integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==
11710+
1170611711
tsutils@^3.17.1:
1170711712
version "3.17.1"
1170811713
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"

0 commit comments

Comments
 (0)