###### — @zhaoworks/query-state

Declarative React components for managing async query states.

#### Installation

``apache
λ bun add @zhaoworks/query-state
`

#### Usage

`tsx
import QueryState, { useQueryState } from '@zhaoworks/query-state';

// → Basic usage with QueryState (default export)
function UserProfile({ userId }) {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [status, setStatus] = useState('loading');

useEffect(() => {
fetchUser(userId).then(
user => (setData(user), setStatus('success')),
err => (setError(err), setStatus('error'))
)
}, [userId]);

return (




// → Use useQueryState for a type-safe alternative to QueryState
function UserProfileTyped({ userId }) {
const query = useAsyncQuery(() => fetchUser(userId), [userId]);
const Query = useQueryState(query);

return (




Components
- Root — Provides query context with optional loading delay
- Pending — Shows content while loading
- Success — Shows content when query succeeds
- Error — Shows content when query fails
- Result — Handles both success and error states
- Empty — Shows content when data is empty

Hooks
- useQueryState(query) — Creates type-safe components (recommended)
- useQueryInfo() — Access query context data

Types
- QueryStatus — 'loading' | 'success' | 'error'
- QueryInfo` — Contains data, error, and status

$3

MIT