Enhancement: reactivity triggered by relationship filters #27
Description
I'm displaying a list of users registered for an event. The event is loaded dynamically and the list of users is then loaded for that event.
My original solution:
<script setup lang="ts">
import { useQuery } from 'zero-vue';
import { UseZeroAnon } from '~/composables/zero';
const route = useRoute()
const event = useQuery(UseZeroAnon().query.event.where('name', route.params.slug).one())
const users = useQuery(UseZeroAnon().query
.user.whereExists('events', q => q.where('id', event.value?.id || null)
)
.orderBy('full_name', 'desc')
)
</script>
But the users query was only called once with event.value as undefined.
I came up with this solution which initially returns an empty list and then returns the correctly filtered list when events is truthy:
const users = useQuery(() => {
if (event?.value === undefined) {
return UseZeroAnon().query.user.limit(0)
}
return UseZeroAnon().query
.user.whereExists('events', q => q.where('id', event.value.id)
)
.orderBy('full_name', 'desc')
})
I'm assuming checking the filter value outside the relationship filter is needed because Vue reactivity isn't triggered by the reference to event in the filter function when event is finally loaded(?)