Server-Side-Pagination with Composition API

Hello, I try to get Server-Side-Pagination with the Composition API up and running. The component I use is a quasar table (https://quasar.dev/vue-components/table#Server-side-pagination%2C-filter-and-sorting).

setup(props, context) {

      const { Buildings } = context.root.$FeathersVuex.api;

      const pagination = reactive({
        sortBy: 'name',
        descending: false,
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 0
      });

      const queryParams = computed(() => {
        return {
          query: {
            $sort: { name: 1 },
            $limit: pagination.rowsPerPage,
            $skip: 0
          },
          paginate: true
        }
      });

      const { items: buildings, paginationData } = useFind({
        model: Buildings,
        params: queryParams
      });

      function onRequest(requestProps) {
        const { rowsPerPage } = requestProps.pagination;
        pagination.rowsPerPage = rowsPerPage;
      }

      return {
        buildings,
        hasLoaded,
        pagination,
        queryParams,
      }
    }

In https://vuex.feathersjs.com/composition-api.html#options it states “Set params.paginate to true to turn off realtime updates for the results and defer pagination to the API server. Pagination works the same as for the makeFindMixin pagination.”. However, I don’t want to turn off realtime updates -> if records come in that match the currently shown page these should replace the current page. If I set paginate to true, no rows are fetched from the server with the above setup.

I have three questions:

• What am I missing to get the above code up and running and keep getting realtime updates?
• How can I initiate the first request?
• How can I get the total number of rows after the request has finished? I need to set pagination.rowsNumber and there is no callback or promise for paginationData to decide when to receive the information from paginationData (already saw total in there).

Thanks for your help in advance!

[olegdev]

I found solution like: :total="latestQuery && latestQuery.response ? latestQuery.response.total : 0"

[marshallswain]

@olegdev That is exactly the way it was intended to be used. Thank you for sharing. I’m going to close up this issue as it seems to be working after the fixes deployed in version 3.7.

The only feature left in this issue that’s not fully implemented is 100% realtime support. Realtime updates are supported for individual records, so we still get realtime support that way. However, keeping paginated lists realtime is a bigger scope than I’m willing to take on right now. I still haven’t even found a logical solution that would be accurate in every use case.