31abc31454
The make relay target merges split graphql files into a single schema.graphql before running the Relay compiler. All CI workflows, the generate target, and documentation now use make relay. Signed-off-by: Émile Ré <emile@getprobo.com>
58 lines
1.6 KiB
Markdown
58 lines
1.6 KiB
Markdown
# apps/console
|
|
|
|
React 19 + Vite + TypeScript + Relay + TailwindCSS. Port 5173.
|
|
|
|
## Commands
|
|
|
|
| Command | Purpose |
|
|
|---------|---------|
|
|
| `npm run dev` | Start dev server (port 5173) |
|
|
| `npm run build` | Production build |
|
|
| `make relay` | Merge split schemas and regenerate Relay artifacts |
|
|
|
|
## Routes
|
|
|
|
Defined in `src/routes.tsx` with feature-specific route files (e.g. `src/routes/assetRoutes.ts`).
|
|
|
|
- Lazy-loaded via `lazy()` from `@probo/react-lazy`
|
|
- Data loading: dedicated `*PageLoader` components with `useQueryLoader` (Relay)
|
|
- Type: all routes `satisfies AppRoute[]`
|
|
- Fallback: `PageSkeleton` or `Fallback` components during loading
|
|
- Error boundaries per route group
|
|
|
|
## Relay
|
|
|
|
Queries, fragments, and mutations are **colocated** in the component that uses them — never in separate `hooks/graph/` files.
|
|
|
|
Always use **fragments** to define data requirements. Never create custom TypeScript types for API data — let Relay generate types from fragments.
|
|
|
|
### Mutations
|
|
|
|
Use `@appendEdge` / `@deleteEdge` directives for Relay store updates:
|
|
|
|
```typescript
|
|
const createAssetMutation = graphql`
|
|
mutation AssetCreateMutation($input: CreateAssetInput!, $connections: [ID!]!) {
|
|
createAsset(input: $input) {
|
|
assetEdge @appendEdge(connections: $connections) {
|
|
node { id name }
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
```
|
|
|
|
## Permissions
|
|
|
|
Inline permission queries in Relay fragments:
|
|
|
|
```graphql
|
|
canCreate: permission(action: "core:asset:create")
|
|
```
|
|
|
|
## Components
|
|
|
|
- Form fields: `src/components/form/`
|
|
- Dialogs: modal components with mutation handling
|
|
- Shared UI: `@probo/ui` package
|