Menu
Build, review, or test React integrations using @pbvex/react, including PBVexProvider, typed query/mutation/action hooks, realtime lifecycle, error handling, and mock-client tests. Use for React components that consume PBVex.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Implement or troubleshoot PBVex and PocketBase application authentication, including auth collections, signup, password, OTP, OAuth2, MFA, auth stores, refresh, impersonation, logout, SSR initialization, and server-side authorization. Use for user identity and token lifecycle work, not deployment credentials.
Build or review PBVex application backends, including deployed function and return contracts, strict object validators and DTOs, application errors, schema, indexed queries and pagination, mutations, actions, authorization, relationships, outbound HTTP, HTTP actions, email templates, generated references, nested calls, and scheduling. Use for application code under pbvex/ and generated-contract workflows.
Route PBVex application and repository work across TypeScript authoring, database queries, authentication and authorization, the Go/PocketBase backend, typed clients, UI integrations, components, deployment, and documentation. Use when starting, planning, debugging, reviewing, or making an end-to-end PBVex change and when selecting a specialized PBVex skill.
Implement, review, troubleshoot, or operate PBVex file and image storage, including upload URLs, StorageId fields, trusted metadata, identity/capability/public downloads, CDN caching, schema-declared thumbnails, local or S3 object storage, limits, deletion, and migration behavior.
Implement or troubleshoot typed PBVex client calls, configuration, structured errors, cancellation, and client-side storage transfers with @pbvex/client. Use for browser, Node, or framework-agnostic integration; pair with pbvex-auth or pbvex-realtime for those subsystems.
Define, mount, evolve, or troubleshoot PBVex components, including component schemas, function bindings, typed mount arguments, environment declarations, generated namespaces, and isolated component data. Use for code involving defineComponent, defineApp, mount, or component references.
| name | pbvex-react |
| description | Build, review, or test React integrations using @pbvex/react, including PBVexProvider, typed query/mutation/action hooks, realtime lifecycle, error handling, and mock-client tests. Use for React components that consume PBVex. |
Install @pbvex/react and its @pbvex/client peer separately. Create one client for the application owner and provide it near the root:
import { Client } from '@pbvex/client';
import { PBVexProvider } from '@pbvex/react';
const client = new Client('http://localhost:8090');
export function Root({ children }: { children: React.ReactNode }) {
return <PBVexProvider client={client}>{children}</PBVexProvider>;
}
Use generated public api references with useQuery, useQueryResult, useMutation, and useAction. useQuery returns undefined while loading and throws query errors to an error boundary; use useQueryResult for explicit { data, error, isLoading } rendering. Pass 'skip' to disable a conditional query. Canonically equal inline arguments do not resubscribe, so do not add useMemo solely for PBVex. useSubscription is a compatibility alias for useQuery.
useMutation and useAction return stable typed async callables. usePBVexClient exposes the provider client and throws outside the provider. The provider does not close a client: the owning application/test must close it.
Server rendering receives the initial loading snapshot and does not open a subscription; hydrate live data on the client. PBVex has no built-in optimistic cache mutation layer, so model explicit local optimistic state only when needed. Use pbvex-auth for browser auth-store initialization and pbvex-realtime for transport behavior.
Use Vitest, renderHook, a PBVexProvider wrapper, and a mock RealtimeTransport injected into Client. Assert loading/data/error, argument changes, stable mutation callable identity, and cleanup (including React StrictMode double subscriptions). Prefer generated references in app tests; synthetic typed refs are appropriate only for isolated SDK-hook tests.
pnpm --filter @pbvex/react test
sed -n '1,240p' docs/guides/react/testing.md
rg -n "useQuery|PBVexProvider" packages/react/src
Do not call hooks conditionally or let a short-lived component silently own a shared client. Authorization remains server-side even when UI state hides controls.