useFind not returning data

[ericuldall]

I'm trying to useFind from a feathersModel and I can see the result getting returned on my feathers api side but I can't access it in Vue.

Here's my sample code:

const pagination = reactive({ $limit: 10, $skip: 0 })
const params = computed(() => {
  return {
    query: {
      ...pagination,
      askedDate: {
        $gt: moment().format('YYYY-MM-DD')
      }
    },
    onServer: true,
  }
})
const Question = useQuestionModel();
const { data, find, prev, next } = Question.useFind(params);
console.log('data', data);

Data has no value in that example. Is there something i'm missing?

[ericuldall]

This is weird.. If I do this:

const questions = ref(Question.useFind(params));

Then in my template:

{{ JSON.stringify(questions) }}

The data are there... I clearly have no idea how this is supposed to work :D

[ericuldall]

After digging a bit deeper. It seems data is empty, allData is empty, but response.data has my query results. However, my understanding is that data should be available in the root data property. Is there some reason that's not making it there?

[ericuldall]

Another reference, the following code works as expected:

const Question = useQuestionModel();
const questions = ref([]);
Question.find(params).then(res => {
    questions.value = res;
});

I'm not sure where the disconnect is. Is it the responsibility of the store connector to populate data/allData in the model useFind call, maybe i've made a mistake in the store setup. I don't see any data in my localStorage, so wondering about that too.

[philipimperato]

My gut says that the date format is throwing off the query to the store. Maybe try toISOString()?

[ericuldall]

no .toISOString method on there, but I used .toString and still no result

[ericuldall]

@marshallswain marshallswain any thoughts on this? I've gone through setup in 2 different projects and useFind doesn't work as expected.

[ericuldall]

Looks like useFind doesn't work as expected unless you implement syncWithStorage on the Model.
Working model below:

import { syncWithStorage } from 'feathers-pinia'; // had to do this since syncWithStorage is absent from auto-import
export const useUsersConfig = () => {
  const { api } = useFeathers();
  const { pinia, idField, whitelist } = useFeathersPiniaConfig()
  const servicePath = 'users'
  const service = useFeathersService(servicePath);
  const name = 'User'

  return { pinia, idField, whitelist, servicePath, service, name }
}

export const useUserModel = () => {
  const { idField, service, name } = useUsersConfig()

  const Model = useModel(name, () => {
    const modelFn = (data) => {
      const defaults = {
        email: '',
        password: '',
      }
      const withDefaults = useInstanceDefaults(defaults, data)
      return withDefaults
    }
    return useFeathersModel({ name, idField, service }, modelFn)
  })

  onModelReady(name, () => {
    service.hooks({ around: { all: [...feathersPiniaHooks(Model)] } })
    syncWithStorage(useUserStore(), ['ids', 'itemsById']) // DO THIS for useFind !!
  })
  connectModel(name, () => Model, useUserStore)

  return Model
}