feathers-vuex
feathers-vuex copied to clipboard
Pagination data not reactive
Steps to reproduce
I am using a composition to watch the total number of notifications from pagination-data:
import { computed, ref, watch } from '@vue/composition-api';
import { useFind } from 'feathers-vuex';
import { get } from 'lodash';
export default ({ model, calendarId }) => {
const unreadNotifications = ref(null);
const qid = 'unreadNotifications';
const params = computed(() => {
if (!calendarId.value) {
return null;
}
return {
query: {
calendar: calendarId.value,
hasBeenRead: false,
$limit: 0,
},
qid,
// paginate: true,
};
});
const { paginationData } = useFind({
model,
params,
});
watch(() => paginationData.value, (_pagination) => {
console.log('pagination', _pagination); // I expect this to be called each time the list length / pagination-data changes
const total = get(_pagination, `${qid}.mostRecent.total`);
if (total !== undefined) {
unreadNotifications.value = _pagination[qid].mostRecent.total;
}
});
return unreadNotifications;
};
Expected behavior
The paginationData
from useFind
should change each time data of that service / query got changed.
Actual behavior
It only updates the first time data is fetched.
System configuration
"dependencies": {
...
"@vue/composition-api": "0.6.7",
"feathers-vuex": "3.13.0",
"vue": "2.6.12",
"vuex": "3.5.1",
...
},
The
paginationData
fromuseFind
should change each time data of that service / query got changed.
I completely agree with this, and this was the intention. Pagination data should update any time a change to this particular query is sent and a response received from the API server. In the example you've posted, above, the paginationData
should change only after you change the calendarId
, which would cause the query to execute against the server, again. Is that what you are saying is not working? Or is it something else? Thanks!
I was hoping that after for example the created
event is received the pagination would update by increasing the total by one if it matches the query.
I agree that it would be a nice addition, but maybe more as a ref return from the usefind.
Now, you can still query the count manually in the store with $limit: 0
or use the countInStore method.