Refetch with params in vue

[Pranav-Bobde]

What I want to do:

Then looked at #2587 and #351 and then tried to use that in stackblitz.

So, instead of useState, we have refs in vue.
So, I tried to pass that as a param, and it seems it's getting unRefed automatically while passing the keys to the function and even so it's value is not the updated one (i.e. it has the initial value only).

Stackblitz Link:
https://stackblitz.com/edit/quasarframework-ny62xs?file=src/pages/IndexPage.vue

Questions:

1. What's the issue here?
2. What's the best way to pull this off?

[DamianOsipiuk]

Two issues in this code that i can see:

• remove the manual call to refetch. useQuery is smart enough to refetch automatically when you change the parameters passed to queryKey
• instead of unwrapping your ref when calculating enabled do it via computed. When you access .value in that place, your are basically loosing reactivity, since this code is run only once. To get proper updates you should do something like this:

  const isEnabled = computed(() => payload.value.order_names.length > 0);
  const { data, error, isLoading, isSuccess, refetch } = useQuery({
    queryKey: ['update-order-name', order_id, payload],
    queryFn: fetchOrder,
    enabled: isEnabled,
    onSettled: (data, error) => {
      if (data) {
        console.log('data: ', data);
      }
      if (error) {
        console.log('error: ', error);
      }
    },
  });

[Pranav-Bobde]

Okay, got it.

Further enquiry:
So, like in my app I have created an APIs folder where I maintain their wrapper(vue-query) file & schema file for each API. And for activating queries on click I read that you can use refetch which is why I was using it (plus you also can't call useQuery inside another function).
And in case I need to pass payloads I've mostly been able to pass it by accessing it directly from pinia stores.

EXAMPLE:
My API files

It's Usage

Queries
So, like if I want:

• to maintain such file-level modularisation (wrapper & schema)
• and also have the ability to manually call the APIs
• and also be able to pass params while calling manually (or should be able to call with the latest data/payload)

1. Can you shower some light upon this, like how to achieve this? any better or recommended ways?
2. Also, when it's best to use such wrapper hooks?
3. Is query keys the only/recommended way to pass payload objects?