@dumbql/vue

@dumbql/vue

Vue composables for @dumbql/client — useQuery, useMutation, useSubscription, useLiveQuery.

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.

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

Dependencies

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