Usage

This module reexports @urql/vue composables :

  • useQuery
  • useMutation
  • useSubscription
  • useClientHandle
  • gql
  • useUrqlClient

Read @urql/vue documentation to learn more.


useQuery

<template>
  <div>{{ data }}</div>
</template>

<script setup lang="ts">
const { data } = useQuery({
  query: gql`
    query name {
      # ...
    }
  `,
});
</script>

useQuery with SSR

Await query to run it on the server :

<template>
  <div>{{ data }}</div>
</template>

<script setup lang="ts">
const { data } = await useQuery({
  query: gql`
    query name {
      # ...
    }
  `,
});
</script>

useUrqlClient

Composable to access the URQL Client instance

<template>
  <div>{{ data }}</div>
</template>

<script setup lang="ts">
const client = useUrqlClient();

const query = gql`
  query name {
    # ...
  }
`;
const { data } = await client.query(query, {}).toPromise();
</script>