FastAPI + React
FastAPI analytics with typed React hooks, generated from Python
Keep your analytics in Python, where your data team already works. hypequery serves the datasets from FastAPI and generates a typed React client from the same definitions, so the frontend can only ask for fields that exist.
Backend
Python + FastAPI
Frontend
@hypequery/react hooks
Contract
Exported, checked in CI
Types drift across the language boundary
A Pydantic model in Python and a hand-written TypeScript interface in React agree until someone renames a field.
Every chart needs fetch glue
Each panel gets its own request helper, loading state, and response type, written by hand against an API it cannot see.
The frontend can ask for anything
Without a contract, the browser can request fields, filters, and page sizes the backend never meant to allow.
One contract
Python defines it. React is generated from it.
Declare which endpoints clients may call in a definitions module with no side effects. Export a client contract from it, without starting a server or opening a connection.
- Only declared endpoints, dimensions, measures, and order fields type-check
- There is no tenant input at all; the tenant comes from Python auth
- Measure values arrive as strings, so decimals keep their precision
--checkin CI fails when definitions change but the committed contract did not
definitions.py
Endpoints clients may call
Install the same endpoints in FastAPI with client_profile= at the same path.
Generate the client
Export, generate, and query from React
The Node CLI turns the exported contract into a typed client for @hypequery/react. Python needs no Node process at runtime.
Generated requests carry a schema hash. If the live endpoint no longer matches the contract, the server answers 409 CLIENT_SCHEMA_CHANGED instead of returning the wrong shape.
The same live contract powers the MCP bridge, so React and AI agents call the same endpoints.
terminal
From Python definitions to a React hook
Re-run the export whenever definitions change, and commit the contract.
Where teams usually get stuck
Questions teams ask
FastAPI React dashboard
Typed hooks over FastAPI dataset endpoints, with caching and loading state from TanStack Query.
Share types between Python and TypeScript
The client contract is the shared schema. Generate it, commit it, and check it in CI.
ClickHouse dashboard with a Python backend
Keep SQL, auth, and tenancy in Python; let the frontend select dimensions and measures by name.
Embedded customer analytics
Every hook call runs as the signed-in customer, because the tenant is resolved by your FastAPI authenticator.
Further reading
Go deeper where it actually helps
Next step
Generate your first typed hook from Python
Declare one client endpoint, export the contract, and call useDataset from a component.
Open source, and it runs in your own backend. Want it hosted?