feathers-vuex icon indicating copy to clipboard operation
feathers-vuex copied to clipboard

Pagination data not reactive

Open anbraten opened this issue 3 years ago • 3 comments

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",
    ...
  },

anbraten avatar Nov 03 '20 11:11 anbraten

The paginationData from useFind 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!

marshallswain avatar Dec 06 '20 23:12 marshallswain

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.

anbraten avatar Dec 09 '20 17:12 anbraten

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.

J3m5 avatar Dec 09 '20 20:12 J3m5