Usage This module reexports @urql/vue composables : useQuery useMutation useSubscription useClientHandle gql useUrqlClient Read @urql/vue documentation to learn more. useQuery < template > < div >{{ data }} < script setup lang = "ts" > const { data } = useQuery ({ query: gql ` query name { # ... } ` , }); useQuery with SSR Await query to run it on the server : < template > < div >{{ data }} < script setup lang = "ts" > const { data } = await useQuery ({ query: gql ` query name { # ... } ` , }); useUrqlClient Composable to access the URQL Client instance < template > < div >{{ data }} < script setup lang = "ts" > const client = useUrqlClient (); const query = gql ` query name { # ... } ` ; const { data } = await client. query (query, {}). toPromise (); html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}

Nuxt URQL