Async mounted hook is not awaiting Feathers-Vuex useFind

Question

I'm having some trouble getting the array in books.value to log to the console. It continues to return no results even after awaiting the useFind function. I have confirmed results exist for the value I pass into the query. If I make a change to the code without refreshing my browser, the console.log will work. What am I doing wrong?

  import { useFind } from "feathers-vuex";

  async mounted() {
    const { Book } = this.$FeathersVuex.api;
    const pathBody = this.$route.path.split("/")[1];

    const bookParams = computed(() => {
      return {
        query: {
          referral_link: pathBody
        }
      };
    });

    const { items: books } = await useFind({
      model: Book,
      params: bookParams
    });

    console.log(books.value); // empty array
  }

score 0 · Answer 1 · answered Jul 27 '21 at 10:12

To use useFind you need to use vue composable api instead of normal functions/options.

Here's how it should looks like instead:

export default {
  component: 'PageName',
  setup(_ , { root }) {
    const { Book } = root.$FeathersVuex.api;
    const pathBody = root.$route.path.split("/")[1];

    const bookParams = computed(() => {
      return {
        query: {
          referral_link: pathBody
        }
      };
    });

    const { items: books } = await useFind({
      model: Book,
      params: bookParams
    });

    return {
      books
    }
  }
}

Also the data on won't be there on mounted since it took time to actually fetch. You can add isPending besides the returned items. Then use it on your template with v-if.

Async mounted hook is not awaiting Feathers-Vuex useFind

1 Answers1