ClickHouse React Hooks: Type-Safe Data Fetching Without the Boilerplate

Most React plus ClickHouse setups start with some variation of this:

It works, but it does not age well. The return type is any[], the endpoint is just a string, and every component starts owning its own networking and typing story.

@hypequery/react replaces that pattern with hooks derived from the same backend query layer your API already uses.

How it works

hypequery's query objects — the same ones you pass to serve({ queries }) — can also be used to generate React hooks. The hook knows the query's return type because it was inferred when you defined the query.

The hook handles loading, error, and data state. The return type is inferred from the query definition. When the schema changes and you regenerate types, any component using the hook gets a type error at compile time — not a runtime surprise.

What createHooks generates

createHooks() takes an object of query definitions and returns a hook per query. Pass { revenue }, get back { useRevenue }.

Each hook returns:

With parameters

If your query accepts inputs, the hook takes them as arguments:

With multi-tenancy

Pass tenant context via headers:

Tenant isolation lives at the query definition level — the hook just passes the header through. The component doesn't need to know about tenancy at all.

Before and after

Before — raw fetch, manual types, duplicated state logic:

After — generated hook, inferred types, zero boilerplate:

Getting started

@hypequery/react requires @hypequery/serve for the shared query definitions. If you're already using the serve layer, adding React hooks is a one-line change.