Skip to main content

Getting Started

Introduction​

The @codeleap/query library is a powerful abstraction layer built on top of TanStack Query (React Query) that dramatically simplifies data management in React applications. It provides a comprehensive solution for handling CRUD operations, caching, optimistic updates, infinite pagination, and much more with minimal boilerplate code.

Key Features​

  • QueryManager: A unified interface for managing specific data types (users, posts, etc.)
  • Optimistic Operations: Show changes immediately while syncing with the server
  • Infinite Pagination: Built-in support for loading more data seamlessly
  • Custom Actions: Define domain-specific operations beyond basic CRUD
  • Intelligent Caching: Leverages TanStack Query's powerful caching system
  • TypeScript First: Full type safety throughout your data layer
  • Polling & Listeners: Advanced real-time data synchronization

Installing the Library​

Install @codeleap/query using Bun:

bun add @codeleap/query

Core Concepts​

QueryManager​

The QueryManager is the main class that manages a specific type of data (e.g., users, posts, etc.). It provides methods to list, create, update, and delete items, while automatically managing cache and state synchronization.

CodeleapQueryClient​

An extension of TanStack Query's QueryClient that adds functionality like polling, change listeners, and advanced utility methods.

Installation and Basic Setup​

import { QueryClient } from '@tanstack/react-query'
import { CodeleapQueryClient } from '@codeleap/query'

// Create the base TanStack Query client
const tanstackClient = new QueryClient()

// Create the extended Codeleap client
export const queryClient = new CodeleapQueryClient(tanstackClient)