feathersjs-ecosystem / feathers-vuex

Integration of FeathersJS, Vue, and Nuxt for the artisan developer
https://vuex.feathersjs.com
MIT License
445 stars 109 forks source link

FeathersVuexGet component doesn't work with params #603

Open gmercey opened 3 years ago

gmercey commented 3 years ago

Steps to reproduce

<template>
  <FeathersVuexGet
    v-slot="{ item: user }"
    service="users"
    :id="id"
    :fetch-params="{ query : { $eager: '[profile]' } }"
  >
     <pre> {{ user }} </pre>
  </FeathersVuexGet>
</template>

...

id: 42

Expected behavior

User object with nested profile object

Actual behavior

User object is empty. The component works fine without params. The query return the expected results without the component.

The issue is how the component use the store getters. According to the documentation fetchParams is only used for the API for the API server, and the component should only use the resource id on the store getters. But currently, params and fetchParams are used in the same way:

https://github.com/feathersjs-ecosystem/feathers-vuex/blob/4ae03bae9b31802e5355871826626ca80236a3ce/src/FeathersVuexGet.ts#L119-L121

Because the params are passed to the store getters, the store returns null.

https://github.com/feathersjs-ecosystem/feathers-vuex/blob/4ae03bae9b31802e5355871826626ca80236a3ce/src/FeathersVuexGet.ts#L95-L105

getArgs return [0: 42, 1: { query : { $eager: '[profile]' }}] and the query is passed as args to the store getters.

Replacing

return this.$store.getters['${this.service}/get'](args) || null

by

return this.$store.getters['${this.service}/get'](this.id) || null

produce the expected results confirming the issue.

System configuration

Latest version of the package.

marshallswain commented 3 years ago

Oh, good point! If you want to make a PR to separate them, I'll accept it. I don't have the ability to focus on this right now.

Thanks for the excellent bug report.