28 lines
819 B
Markdown
28 lines
819 B
Markdown
# @repo/api-client — Shared React Query Hooks
|
|
|
|
Framework-agnostic tRPC + React Query provider consumed by all apps.
|
|
|
|
## Rules
|
|
|
|
- NEVER import framework-specific code (no next/, no tanstack/)
|
|
- NEVER put business logic in hooks
|
|
- Hooks use `useTRPC()` from `./trpc.ts`
|
|
- Both Next.js and TanStack Start apps use the same `<ApiProvider>`
|
|
|
|
## Usage in Apps
|
|
|
|
```tsx
|
|
import { ApiProvider, useTRPC } from "@repo/api-client";
|
|
|
|
// Root layout:
|
|
<ApiProvider trpcUrl="/api/trpc">{children}</ApiProvider>
|
|
|
|
// In components:
|
|
const trpc = useTRPC();
|
|
const articles = trpc.content.listArticles.useQuery({});
|
|
```
|
|
|
|
## Adding a New Hook (optional wrapper)
|
|
|
|
Custom hooks are optional — `useTRPC()` provides typed access to all procedures directly. Only create wrapper hooks if you need shared query logic across multiple components.
|