useClient() gives you the low-level fetch wrapper that the shared hooks use for browser-side API calls. It builds requests from the current deployment instead of from a separate client configuration layer.
Usage
The following example shows a basic usage of useClient().
export default function PrivateData() { const { client, loading } = useClient(); async function load() { const response = await client('/me'); const data = await response.json(); console.log(data); } if (loading) { return null; } return <button onClick={load}>Load profile</button>;}
Return value
The hook returns the following fields and methods.
›
client: Client;
A deployment-aware fetch function that prefixes the backend host, merges headers, and applies the correct environment-specific request behavior.
›
loading: boolean;
Whether the deployment is still loading. While this is true, the client will throw if you try to call it.
How it works
The hook does not create a separate client singleton or context. It reads deployment and loading from useDeployment(), then memoizes a client(url, options) function around that state.
That client automatically prefixes the deployment backend host, preserves any caller-provided headers, and chooses the default request mode from the deployment. In production it sends credentials: "include", and in staging it appends the stored __dev_session__ token to the query string instead.
If a staging response returns x-development-session, the hook persists that value so later requests keep using the same development session.
If you call the client before the deployment is ready, it throws Deployment is loading instead of guessing how to build the request.
When to use it
Use it for advanced calls that are not already wrapped by a higher-level hook.
If a domain-specific hook already exists, prefer that instead.
Examples
Call a backend route directly
export default function ProfileLoader() { const { client, loading } = useClient(); async function loadProfile() { const response = await client('/me'); const result = await response.json(); console.log(result); } if (loading) { return null; } return <button onClick={loadProfile}>Load profile</button>;}
