How to use $fetch instead of useAsyncData

[ozum]

Hi @wobsoriano,

useQuery()  leverages useAsyncData which is great for most use cases. However, I need raw data, because I use vue-query.

The front page of the documentation site states that we can also use $fetch. How can I use $fetch instead of useAsyncData?

For example:

const fetcher = () => $client.hello.useQuery({ text: "client" });

const { isLoading, isError, data, error } = useQuery({ queryKey: ["test"], queryFn: fetcher });

I can use $client.hello.query({ text: "client" }) instead of useQuery, but I want to leverage $fetch.

Many thanks,

[qin-guan]

Hey @ozum, not sure if you’ve resolved this yet.

I believe you’re able to use .query(…) instead of .useQuery(…) which should give you access to the raw query without useAsyncData.

It is outlined in the docs here https://trpc-nuxt.vercel.app/get-started/client

[wobsoriano]

Thanks @qin-guan!