Modern HyperCard for React - All-in-one data management (REST + Graph API + Auth + Hooks + UI)
npm install @qwanyx/stackuseQuery and useMutation
@qwanyx/stack provides everything you need to manage data in one package. No more juggling multiple libraries for API calls, auth, and state management.
bash
npm install @qwanyx/stack
`
Quick Start
$3
`typescript
import { initializeApiClient } from '@qwanyx/stack'
// In your app entry point
initializeApiClient({
baseUrl: 'https://api.qwanyx.com'
})
`
$3
`typescript
import { useQuery } from '@qwanyx/stack'
function AuthorsList() {
const { data, loading, error } = useQuery('belgicomics/authors', {
country: 'BE'
})
if (loading) return Loading...
if (error) return Error: {error.message}
return (
{data.map(author => (
{author.name}
))}
)
}
`
$3
`typescript
import { useMutation } from '@qwanyx/stack'
function CreateAuthor() {
const { mutate, loading } = useMutation('belgicomics/authors', 'POST')
const handleSubmit = async (formData) => {
await mutate(formData)
}
return
}
`
API Clients
$3
For standard REST APIs:
`typescript
import { getApiClient } from '@qwanyx/stack'
const client = getApiClient()
// CRUD operations
const authors = await client.get('belgicomics/authors', { country: 'BE' })
const author = await client.post('belgicomics/authors', { name: 'HergΓ©' })
await client.put('belgicomics/authors/123', { name: 'Updated' })
await client.delete('belgicomics/authors/123')
`
$3
For hierarchical data from qwanyx-brain:
`typescript
import { GraphClient } from '@qwanyx/stack'
const graph = new GraphClient({
baseUrl: 'https://api.qwanyx.com',
system_id: 'user-id'
})
// Work with nodes and edges
const children = await graph.getChildren(parentId)
const node = await graph.addNode({ type: 'note', title: 'Hello' })
await graph.moveNode(nodeId, newParentId)
`
Authentication
`typescript
import { AuthManager } from '@qwanyx/stack'
// Login
AuthManager.setToken('your-jwt-token')
// Check auth
if (AuthManager.isAuthenticated()) {
// User is logged in
}
// Logout
AuthManager.clearToken()
// Token is automatically added to all API requests
`
React Hooks
$3
Fetch data with automatic loading and error states:
`typescript
const { data, loading, error, refetch } = useQuery(
'endpoint',
{ filter: 'value' }, // optional params
{
enabled: true, // optional: disable auto-fetch
onSuccess: (data) => console.log(data),
onError: (error) => console.error(error)
}
)
`
$3
Create, update, or delete data:
`typescript
const { mutate, loading, error, reset } = useMutation(
'endpoint',
'POST', // or 'PUT', 'PATCH', 'DELETE'
{
onSuccess: (data) => console.log('Success!', data),
onError: (error) => console.error('Failed!', error)
}
)
await mutate({ name: 'New Item' })
`
TypeScript Support
Full TypeScript support with generics:
`typescript
interface Author {
id: string
name: string
country: string
}
const { data } = useQuery('belgicomics/authors')
// data is typed as Author[] | null
const { mutate } = useMutation>('belgicomics/authors', 'POST')
// mutate accepts Partial and returns Author
`
Architecture
Stack follows a stable API principle:
`
βββββββββββββββββββββββββββββββββββββββ
β Your App (Belgicomics) β
β - React components β
β - App-specific logic β
βββββββββββββββ¬ββββββββββββββββββββββββ
β
β
βββββββββββββββββββββββββββββββββββββββ
β @qwanyx/stack (this package) β
β - API clients β
β - Auth management β
β - React hooks β
β - UI components β
βββββββββββββββ¬ββββββββββββββββββββββββ
β
β
βββββββββββββββββββββββββββββββββββββββ
β API (Rust backend) β
β - STABLE, rarely changes β
β - Just returns data β
βββββββββββββββββββββββββββββββββββββββ
`
The API stays simple and stable. Stack adds intelligence and evolves rapidly. Your app uses Stack's simple interface.
For Desktop Apps
Stack works great with Tauri for desktop applications:
`
Rust (backend) + Tauri (framework) + React (UI) + Stack (data) = Perfect combo
``