Client

Better Query offers a client library compatible with popular frontend frameworks like React, and more. This client library includes a set of functions for interacting with the Better Query server for CRUD operations. Each framework's client library is built on top of a core client library that is framework-agnostic, so that all methods and hooks are consistently available across all client libraries.

Installation

If you haven't already, install better-query.

npm i better-query

Create Client Instance

Import createQueryClient from the package for your framework (e.g., "better-query/react" for React). Call the function to create your client. Pass the base URL of your query server. If the query server is running on the same domain as your client, you can skip this step.

If you're using a different base path other than /api, make sure to pass the whole URL, including the path. (e.g., http://localhost:3000/api/query)

lib/query-client.ts
import { createQueryClient } from "better-query/client"
export const queryClient = createQueryClient({
    baseURL: "http://localhost:3000/api" // The base URL of your query server
})
lib/query-client.ts
import { createQueryClient } from "better-query/react"
export const queryClient = createQueryClient({
    baseURL: "http://localhost:3000/api" // The base URL of your query server
})

Usage

Once you've created your client instance, you can use the client to interact with the Better Query server. The client provides a set of CRUD functions by default and they can be extended with plugins.

Example: Create a Resource

query-client.ts
import { createQueryClient } from "better-query/client"
const queryClient = createQueryClient()

await queryClient.product.create({
    name: "Awesome T-Shirt",
    price: 29.99,
    status: "active"
})

Example: List Resources

query-client.ts
const result = await queryClient.product.list({
    page: 1,
    limit: 10,
    search: "shirt"
});

console.log(result.data.items); // Array of products
console.log(result.data.pagination); // Pagination info

On this page