Skip to content

Commit 87407a1

Browse files
committed
Add example of using queryWhen.
1 parent 094cfd7 commit 87407a1

File tree

1 file changed

+46
-0
lines changed

1 file changed

+46
-0
lines changed

docs/composition-api.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -388,6 +388,52 @@ export default {
388388
}
389389
```
390390
391+
### Using queryWhen
392+
393+
The `queryWhen` option for both `useFind` and `useGet` comes in handy when you want to, say, not query if an item already exists. This next example shows how to stop the `get` request if you already have a patient with the current `id`.
394+
395+
```html
396+
<template>
397+
<div>
398+
<div v-if="isPatientLoading">Loading</div>
399+
<div v-else>{{ patient.name }}</div>
400+
</div>
401+
</template>
402+
403+
<script>
404+
import { computed } from '@vue/composition-api'
405+
import { useFind, useGet } from 'feathers-vuex'
406+
407+
export default {
408+
name: 'PatientInfo',
409+
props: {
410+
id: {
411+
type: String,
412+
required: true
413+
}
414+
},
415+
setup(props, context) {
416+
const { Patient } = context.root.$FeathersVuex.api
417+
418+
const patientQueryWhen = computed(() => {
419+
return !Patient.getFromStore(props.id)
420+
})
421+
const { item: patient, isPending: isPatientLoading } = useGet({
422+
model: Patient,
423+
id: props.id,
424+
queryWhen: patientQueryWhen
425+
})
426+
427+
return {
428+
patient,
429+
isPatientLoading
430+
}
431+
}
432+
}
433+
```
434+
435+
In the above example, the `patientQueryWhen` computed property will return `true` if we don't already have a `Patient` record in the store with the current `props.id`. While you could also achieve similar results by performing this logic inside of a `params` computed property, the `queryWhen` option works great as a "master override" to prevent unneeded queries.
436+
391437
## Conventions for Development
392438
393439
### Params are Computed

0 commit comments

Comments
 (0)