Features

• createDumbqlPlugin(client) — Vue plugin to provide DumbqlClient
• useQuery(document, options?) — reactive query composable with refetch, fetchMore, pollInterval
• useMutation(document, options?) — mutation composable with update callback
• useSubscription(document, options?) — subscription composable with onNext/onError
• useLiveQuery(document, options?) — real-time query (HTTP fetch + WebSocket subscription)
• useClient() — access DumbqlClient from anywhere
• Reactive refs — data, loading, error, errorCode are Vue refs
• SSR support — works with Vue's onServerPrefetch

Install

npm install @dumbql/vue @dumbql/client

Quick Start

<script setup>
import { createDumbqlPlugin, useQuery, gql } from '@dumbql/vue';
import { createClient } from '@dumbql/client';

const client = createClient({ endpoint: '/graphql' });
const plugin = createDumbqlPlugin(client);

const GET_TODOS = gql`query Todos { todos { id title } }`;
const { data, loading, error, refetch } = useQuery(GET_TODOS);
</script>

<template>
  <p v-if="loading">Loading…</p>
  <p v-else-if="error">{{ error }}</p>
  <ul v-else>
    <li v-for="todo in data.todos" :key="todo.id">{{ todo.title }}</li>
  </ul>
</template>

Composable API

useQuery

const { data, loading, error, errorCode, networkStatus, called, refetch, fetchMore } = useQuery(
  document,
  {
    variables,
    pollInterval,       // auto-polling in ms
    skip,               // skip initial fetch
    onCompleted,        // (data) => void
    onError,            // (error, errorCode?) => void
  },
);

All result fields are Vue Refs except refetch and fetchMore.

| Field | Type | Description | |-------|------|-------------| | data | Ref<TData \| null> | Response data | | loading | Ref<boolean> | True during initial fetch or refetch | | error | Ref<string \| null> | Error message | | errorCode | Ref<ErrorCode \| undefined> | Typed error code | | networkStatus | Ref<NetworkStatus> | 'loading' \| 'ready' \| 'error' \| 'refetching' \| 'poll' | | called | Ref<boolean> | True after first execution | | refetch | (vars?) => Promise<GraphQLResult<T>> | Re-fetch with optional new variables | | fetchMore | (merge, vars?) => Promise<GraphQLResult<T>> | Fetch more data and merge |

useMutation

const { data, loading, error, errorCode, called, mutate } = useMutation(
  document,
  {
    variables,
    onCompleted,   // (data) => void
    onError,       // (error, errorCode?) => void
    update,        // (cache, result) => void — update cache after success
  },
);

mutate(variables);

useSubscription

const { data, loading, error, errorCode } = useSubscription(
  document,
  {
    variables,
    wsEndpoint,       // default: derived from client endpoint
    shouldSubscribe,  // default: true
    onNext,           // (data) => void
    onError,          // (error, errorCode?) => void
    onComplete,       // () => void
  },
);

useLiveQuery

Real-time query that executes an initial HTTP fetch then subscribes to WebSocket updates.

const { data, loading, error, errorCode } = useLiveQuery(
  document,
  {
    variables,
    wsEndpoint,       // default: derived from client endpoint
    shouldSubscribe,  // default: true
    onCompleted,      // (data) => void
    onError,          // (error, errorCode?) => void
  },
);

API Overview

| Export | Description | |--------|-------------| | createDumbqlPlugin(client) | Vue plugin — installs the client globally | | useClient() | Access DumbqlClient from composition API | | useQuery(doc, opts?) | Reactive query with refetch, fetchMore, pollInterval | | useMutation(doc, opts?) | Mutation with update callback | | useSubscription(doc, opts?) | Subscription with onNext/onError | | useLiveQuery(doc, opts?) | Real-time query (fetch + WS) |

Dependencies

vue (^3), @dumbql/client, graphql