Vue query syntax without destructuring

[lucas-santosP]

Is it possible to access the values returned by useQuery in Vue without resorting to destructuring and without needing to use .value in the template?

Example of what I'm doing right now, which requires .value in the template:

script:

const listParametrization = useQuery({
  queryKey: ["listParametrization"],
  queryFn: () => WalletService.listParametrization(),
});

template:

<Table
  :loading="listParametrization.isFetching.value"
  :items="listParametrization.data.value"
  :error="listParametrization.error.value"
/>

I know I could use destructuring and access data, isFetching and error individually. But in a component with multiple queries, this is impracticable because of name collisions. And renaming each of these values with something like isFetchingParametrization, errorParametrization, dataParametrization... would not be a good syntax and is too verbose.

So the best solution is a wrapper object and it makes more sense semantically, but the need of .value inside the template is annoying and discordant from the rest of the usual reactive code. There's any way to fix that?

[rrigby]

Just wanted to say thank you for making this post. I couldn't figure out why I couldn't use the query without destructuring until I found this.

I agree, it's quite confusing and if there's any way possible to resolve this it would be a great addition.

[leomedeiros]

Another one thanking this question as it was the only hint to use the results of useQuery without destructuring it.
Valeu @lucas-santosP !!

@TkDodo , the documentation is not very clear about the fact that when you don't destructure the return of useQuery, each property is a ref, and needs to be accessed through its .value getter. I spent a lot of time to figure this one out.