@kitbag/query

A type-safe, composable query system designed specifically for Vue.js applications. Built for Vue 3's Composition API with intelligent caching, tag-based invalidation, and full TypeScript support.

Getting Started

Get Started with our documentation

Features

• Type Safety First - Fully typed queries, mutations, and data transformations
• Vue 3 Native - Built for Composition API with reactive composables
• Intelligent Caching - Smart caching with tag-based invalidation system
• Error Handling - Built-in loading states, error handling, and retry logic
• Optimistic Updates - Seamless mutations with automatic rollback on failure
• Composable Architecture - Reusable functions that feel natural in Vue

Quick Start

Installation

# bun
bun add @kitbag/query
# yarn
yarn add @kitbag/query
# npm
npm install @kitbag/query

Creating a query

Simply pass the function (searchCats) and a getter for the arguments to that function (() => ['Maine Coon']).

import { useQuery } from '@kitbag/query'

function searchCats(breed?: string) {
  ...
}

const catsQuery = useQuery(searchCats, () => ['Maine Coon'])

That's it! Now you have access to several useful properties on the query for tracking loading state, error state, and of course the response from searchCats when it's resolved.

Using a query

<template>
  <div v-if="catsQuery.loading">
    Loading...
  </div>
  
  <div v-else-if="catsQuery.errored">
    Error: {{ catsQuery.error }}
  </div>
  
  <div v-for="cat in catsQuery.data ?? []" :key="cat.id">
    <h1>{{ cat.name }}</h1>
  </div>
</template>