Skip to main content

​
Overview

The QueryClient provides React Query-like functionality for managing async state with automatic caching, refetching, and invalidation. Works in any JavaScript environment.

​
Import

import { QueryClient } from "bytekit";
// or
import { QueryClient } from "bytekit/query-client";

​
Constructor

const queryClient = new QueryClient();

​
Methods

​
query

Execute a query with automatic caching.
​
key
string
required
Unique query key
​
fn
() => Promise<T>
required
Async function to execute
​
options
QueryOptions
Query options (staleTime, cacheTime, retry)
const data = await queryClient.query("users", async () => {
  const response = await fetch("/api/users");
  return response.json();
});

​
invalidate

Invalidate cached queries to trigger refetch. 
queryClient.invalidate("users");

​
refetch

Manually refetch a query. 
await queryClient.refetch("users");

​
setQueryData

Manually set query cache data. 
queryClient.setQueryData("users", newData);

​
getQueryData

Get cached query data. 
const cached = queryClient.getQueryData<User[]>("users");

​
Usage Example

import { QueryClient } from "bytekit";

const queryClient = new QueryClient();

// Fetch with caching
const users = await queryClient.query("users", fetchUsers, {
  staleTime: 60000, // 1 minute
  cacheTime: 300000 // 5 minutes
});

// Mutation with cache update
async function createUser(data: CreateUserInput) {
  const newUser = await api.post("/users", data);
  
  // Invalidate to refetch
  queryClient.invalidate("users");
  
  // Or update cache directly
  const cached = queryClient.getQueryData<User[]>("users");
  if (cached) {
    queryClient.setQueryData("users", [...cached, newUser]);
  }
  
  return newUser;
}

​
See Also