@kevincii/http-query-react
v0.2.0
Published
React hooks for the HTTP QUERY method: useHttpQuery, useInfiniteHttpQuery, useHttpMutation, with a cache-backed provider. Built on @kevincii/http-query-core.
Maintainers
Readme
@kevincii/http-query-react
React hooks for the HTTP QUERY method, built on
@kevincii/http-query-core.
Think React Query, focused on the QUERY-first approach: type-safe params, nested
filters, a shared cache, and pagination.
Install
npm install @kevincii/http-query-react @kevincii/http-query-core reactUsage
import { HttpQueryProvider, useHttpQuery } from "@kevincii/http-query-react";
function App() {
return (
<HttpQueryProvider clientOptions={{ baseUrl: "/api" }}>
<Users />
</HttpQueryProvider>
);
}
function Users() {
const { data, isLoading, error, refetch } = useHttpQuery<User[]>("/users", {
filter: { active: true, age: { gte: 18 } },
sort: "name",
});
if (isLoading) return <p>Loading…</p>;
if (error) return <p>Failed.</p>;
return <ul>{data?.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}Hooks
useHttpQuery(path, params?, options?)— cached, deduped reads.useInfiniteHttpQuery(path, params?, options?)— offset pagination withfetchNextPage.useHttpMutation(fn, options?)— writes with lifecycle state.useHttpQueryClient()/useQueryCache()— escape hatches.
See the documentation site for full options.
