Potential Issue with Params.Paginate set to true

[william-seaton]

Steps to reproduce

Use the composition API on a registered service and set params.paginate = true which should disable live updates

Expected behaviour

It should use server side pagination instead according to the documentation

Actual behaviour

It throws two errors on runtime:

Error in render: "TypeError: Cannot read property 'pagination' of undefined"

found in

---> <IntelProductsList>
       <IntelProducts> at src/views/intel/Products.vue
         <Home> at src/views/Home.vue
           <App> at src/App.vue
             <Root>

TypeError: Cannot read property 'pagination' of undefined
    at VueComponent.eval (useFind.js?9e4f:58)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
    at RefImpl.computedGetter [as value] (vue-composition-api.esm.js?a6f4:1209)
    at VueComponent.get [as products] (vue-composition-api.esm.js?a6f4:1420)
    at Object.get (vue.runtime.esm.js?2b0e:2072)
    at Proxy.render (products-list.vue?b1a4:8)
    at eval (vue-composition-api.esm.js?a6f4:1568)
    at activateCurrentInstance (vue-composition-api.esm.js?a6f4:1528)
    at Proxy.$options.render (vue-composition-api.esm.js?a6f4:1568)

System configuration

Here is the actual code causing the issue:

import { computed } from "@vue/composition-api";
import { useFind } from "feathers-vuex";

export default {
  name: "IntelProductsList",
  components: {},
  setup(props, context) {
    const { IntelProducts } = context.root.$FeathersVuex.api;

    const ProductListParams = computed(() => {
      const query = {};
      const paginate = true;
      return { query, paginate };
    });

    const { items: products } = useFind({
      model: IntelProducts,
      params: ProductListParams,
    });

    return {
        products,
    };
  },
};

Model:

import { BaseModel } from '@/store/feathers/feathers.client.js';

export default class IntelProduct extends BaseModel {
  constructor(data, options) {
    super(data, options);
  }

  static modelName = 'IntelProducts';

  // eslint-disable-next-line no-unused-vars
  static instanceDefaults(data, { models, store }) {
    return {
      // write your default properties for reactivity here; see: https://vuex.feathersjs.com/model-classes.html#instancedefaults
    };
  }

  // eslint-disable-next-line no-unused-vars
  static setupInstance(data, { models, store }) {
    // use this for transforming your data, e.g. transform a Date-string into a Date object; see: https://vuex.feathersjs.com/model-classes.html#setupinstance
    return data;
  }
}

Service:

import feathersClient, {
  makeServicePlugin
} from '@/store/feathers/feathers.client.js';

import Model from '../models/intel-products.model.js';

const servicePath = "intel/products";
// for more information see https://vuex.feathersjs.com/service-plugin.html#configuration
const servicePlugin = makeServicePlugin({
  Model,
  servicePath,
  namespace: 'intel.products',
  service: feathersClient.service(servicePath),
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  whitelist: ['$like']
});

feathersClient.service(servicePath).hooks({
  before: {
    all: [],
    find: [],
    get: [],
    create: [],
    update: [],
    patch: [],
    remove: []
  },
  after: {
    all: [],
    find: [],
    get: [],
    create: [],
    update: [],
    patch: [],
    remove: []
  },
  error: {
    all: [],
    find: [],
    get: [],
    create: [],
    update: [],
    patch: [],
    remove: []
  }
});

export default servicePlugin;

Notes

Perhaps I'm doing something wrong here? I'll tell you what I'm trying to do, I mentioned this in Slack already as well. I have a huge dataset which I need to search using Sequelize's $like. I'm trying just query the server directly using the composition API and I'm hoping to try using fetchParams which I've tested and allows me to pass $like and sort the query and use params.paginate = false so its just straight from the server... at least that is my hope 😄

I think a better way of doing this is coming in the next version.

What I've done to fix it

I've gone through and stripped down my function (which used to have a pagination component etc) down so that way I could debug and put it to the simplest I can. I've also read through pretty well every issue on the repo and read all relevant documentation, and it seems that this should work... so I'm filing it here as perhaps a bug.

I can a simple Feathers app using Sequelize and push it live on our testing cluster if you want to test as well 😄

[Marshall Thompson]

So the bigger issue here is definitely SQL integration. It's more difficult than with MongoDB because each SQL ORM has its own implementation. Since I'm so accustomed to using MongoDB in apps, I never run into the issue. I think the real solution is to create a library of custom params that people can pass into feathers-vuex which feathers-vuex then hands off to the sift module.

As for this issue, can you try setting paginate to a valid Feathers Paginate object? Something like

{
  default: 5,
  max: 25
}

And see if that causes the same issue.