@nano_kit/query

A small and powerful remote data manager for @nano_kit/store state manager.

• Small. Minimal footprint with tree-shakable architecture.
• Type-safe. Full TypeScript support with type inference for queries and mutations.
• Signal-based. Built on top of @nano_kit/store's reactive signals for automatic UI updates.
• Flexible. Supports queries, infinite queries, mutations, and operations with cache management.
• Extensible. Customizable with settings and extensions.

Installation

pnpm add @nano_kit/store @nano_kit/query
# or
npm install @nano_kit/store @nano_kit/query
# or
yarn add @nano_kit/store @nano_kit/query

Quick Start

Here is a minimal example demonstrating reactive data fetching with automatic cache management:

import { signal, effect } from '@nano_kit/store'
import { queryKey, client } from '@nano_kit/query'

/* Define a cache key for your data */
const PostKey = queryKey<[postId: number], Post | null>('post')

/* Create a signal with the post ID to fetch */
const $postId = signal(1)

/* Create a query client */
const { query } = client()

/* Create a reactive query */
const [$post, $postError, $postLoading] = query(PostKey, [$postId], postId => fetch(`/api/posts/${postId}`).then(r => r.json()))

/* React to data changes (mounting $post triggers data fetching) */
const unsub = effect(() => {
  if ($postLoading()) {
    console.log('Loading...')
  } else if ($postError()) {
    console.log('Error:', $postError())
  } else {
    console.log('Post:', $post())
  }
})
// Output: Loading...
// Output: Post: { id: 1, title: 'First Post', ... }

/* Update triggers automatic refetch */
$postId(2)
// Output: Loading...
// Output: Post: { id: 2, title: 'Second Post', ... }

/* Cleanup: removes listener and stops data fetching */
unsub()

Documentation

For comprehensive guides, advanced patterns, and API reference, visit the documentation website.