api-patterns
API Patterns
Make API calls with Connect Query and handle responses properly.
Activation Conditions
- Making API calls
- Using Connect Query hooks
- Cache invalidation
- Mutations and optimistic updates
- Toast notifications for errors
Quick Reference
| Action | Rule |
|---|---|
| Fetch data | use-connect-query.md |
| After mutation | api-invalidate-cache.md |
| Handle errors | api-toast-errors.md (use formatToastErrorMessage in onError) |
| Protobuf files | protobuf-no-edit.md |
Key Locations
| Location | Purpose |
|---|---|
/src/react-query/ |
Connect Query hooks |
/src/protogen/ |
Generated protos (DO NOT EDIT) |
Regenerate protos: task proto:generate (from repo root)
Rules
See rules/ directory for detailed guidance on queries, mutations, cache invalidation, and error handling.
More from redpanda-data/console
react-best-practices
Client-side React performance optimization patterns.
72tanstack-router-migration
Migrate React applications from React Router to TanStack Router with file-based routing. Use when user requests: (1) Router migration, (2) TanStack Router setup, (3) File-based routing implementation, (4) React Router replacement, (5) Type-safe routing, or mentions 'migrate router', 'tanstack router', 'file-based routes'.
61code-standards
TypeScript, React, and JavaScript best practices enforced by Ultracite/Biome.
55security-scan
Resolve npm dependency vulnerabilities detected by security scans.
49e2e-tester
Write and run Playwright E2E tests for Redpanda Console using testcontainers. Analyzes test failures, adds missing testids, and improves test stability. Use when user requests E2E tests, Playwright tests, integration tests, test failures, missing testids, or mentions 'test workflow', 'browser testing', 'end-to-end', or 'testcontainers'.
45ui-development
Build UI with Redpanda Registry components, Tailwind v4, and accessibility best practices.
44