Feathers-vuex: Hoping to support server paging parameters

[milescui]

feathersjs server return the data structure

{
"total": "",
"limit": "",
"skip": " "data": [/* data */]
}

feathers-vuex removed total, limit, skip .I hope to be able to keep these data.

Thanks

[marshallswain]

How would you propose keeping this data around? The challenge is that these numbers vary per query. This is definitely a real problem, but I haven't figured out a decent way to make it work. The simplest solution would be to only store the latest query's data, but that won't work well for two widgets that use the same service to show data for two different queries, as would be the case in dashboards.

[marshallswain]

Actually, you should still have access to this data. It doesn't make it into the store, but you could still use it in individual component's state. The response to dispatching an action will have the pagination data, still, as seen here: https://github.com/feathersjs/feathers-vuex/blob/master/src/service-module/actions.js#L8

The return from handleResponse is the full response, not just the data.

[milescui]

I propose keeping pagination raw data in vuex state.

Example：

{
    ids: [],
    keyedById: {}, // A hash map, keyed by id of each item
    currentId: undefined, // The id of the item marked as current
    copy: undefined, // A deep copy of the current item
    service, // the FeathersService
    idField: 'id',

    findRawData: {
         "total": "",
         "limit": "",
         "skip": "<number of skipped items (offset)>",
         "data": [/* data */]
    }

    isFindPending: false,
    isGetPending: false,
    isCreatePending: false,
    isUpdatePending: false,
    isPatchPending: false,
    isRemovePending: false,

    errorOnfind: undefined,
    errorOnGet: undefined,
    errorOnCreate: undefined,
    errorOnUpdate: undefined,
    errorOnPatch: undefined,
    errorOnRemove: undefined
  }

[marshallswain]

Right, it would make sense to put it in the store, but that only allows pagination work for a single find. That will break just as soon as you do another query.

Example scenario:

• find({query: {}) - returns total of 500
• find({query: {isVerified: true}) - returns total of 20

Upon making the first find, we get the total of 500. Then making the second causes that data to be overwritten, so your new total is 20, which messes up your pagination for the first one.

[milescui]

I think of another idea.

Add new action:

• findByPagination ({query: {})

Add new store item:

findByPaginationData: { "total": "", "limit": "", "skip": "<number of skipped items (offset)>", "data": [/* data */] }
findByPagination results will be stored in the findByPaginationData state.
find and findByPagination results independent of each other

[marshallswain]

@milescui I've added the ability to customize the state, getters, mutations, and actions for each service using the service's vuex method. The pagination still isn't handled internally, but you should be able to store it on your own, now:

feathersClient.service('todos').vuex({
  state: {
    pagination: {}
  },
  mutations: {
    updatePagination (state, payload) {
      state.pagination.total = payload.total
      state.pagination.skip = payload.skip
    }
  }
})

store.dispatch('todos/find', {})
  .then(response => {
    store.commit('todos/updatePagination', response)
  })

I'm going to close this issue, because I don't see a way to make this work universally. For two components that query the same exact data, but need separate pagination controls, the best that any universal solution would do is synchronize their pagination, which is likely not wanted. There's no way other than custom that will work. Feel free to reopen if you have some ideas.

[milescui]

ok，thanks

[ellipticaldoor]

@marshallswain I added the code above but the total and skip are undefined.

I made console.log(payload) in the mutations and I don't get the desired data, instead this appears:

[marshallswain]

@ellipticaldoor I may have messed up the syntax for store.commit('todos/updatePagination', response). Can you check the Vuex docs for how to call a module's mutation?

[ellipticaldoor]

@marshallswain the syntax is right, I think the problem is that the store.dispatch('todos/find', {})
.then(response returns a promise instead of the raw data

[jskrzypek]

you need a third argument to the commit() or dispatch() method that tells it run the mutation or the action from the root store, like this: store.commit('todos/updatePagination', response, { root: true })

[jskrzypek]

see: https://github.com/vuejs/vuex/blob/dev/docs/en/modules.md#accessing-global-assets-in-namespaced-modules

[ellipticaldoor]

@jskrzypek I added your line and I still get the same result. Maybe I'm doing something wrong?

When I console.log(response) I don't get the response, instead it shows a Subscriber object

[milescui]

@ellipticaldoor I have the same problem. If your feathers-client used feathers-reative, your response will get Subscriber object, instead of response object.

Related code

[marshallswain]

@milescui @ellipticaldoor @jskrzypek I've removed the need for RxJS and feathers-reactive in the pre-release. See https://github.com/feathersjs/feathers-vuex/issues/40. I've improved support for pagination, too.