avnt-react-orm

library2.0.13jsnpmunverified

A React ORM-like data management and UI orchestration library (v2.0.13) that provides an organized structure for state management, CRUD operations, form handling, and validation in React applications. It uses models, controllers, and providers to streamline data interaction, supports relationships between models, and integrates with zod for validation. Released as a stable package with TypeScript support, it requires @tanstack/react-query v4 and react 18. Differentiators include a declarative field configuration system, per-action schemas, and a React-Query underpinning for server state synchronization.

database

npm install avnt-react-orm

package ↗

INSTALL

IMPORT

SIG · AVNT-REACT-ORM

avnt-react-orm

databasejavascriptv2.0.13

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ModelBase

✓ import { ModelBase } from 'avnt-react-orm'

✗ import { ModelBase } from 'avnt-react-orm/ModelBase'

Default export from main package; TypeScript types included.

ControllerBase

✓ import { ControllerBase } from 'avnt-react-orm'

✗ import ControllerBase from 'avnt-react-orm'

Named export, not default.

avnt-react-orm (CommonJS)

✓ const { ModelBase } = require('avnt-react-orm')

✗ const avntReactOrm = require('avnt-react-orm')

CJS usage requires destructuring named exports.

Demonstrates creating a Model and Controller with zod validation and field configuration.

import React from 'react'; import { ModelBase, ControllerBase } from 'avnt-react-orm'; import { z } from 'zod'; // Define a model class User extends ModelBase { collection = 'users'; attributes = { id: { name: 'id', value: '' }, name: { name: 'name', value: '' }, email: { name: 'email', value: '' }, }; fillable = ['name', 'email']; } // Define a controller class UserController extends ControllerBase<User> { constructor() { super(new User()); } settings = { fields: { name: { label: 'Name', type: 'text', showWhen: ['store', 'update'], component: 'input' }, email: { label: 'Email', type: 'email', showWhen: ['store', 'update'], component: 'input' }, }, schema: z.object({ name: z.string().min(1, 'Name is required'), email: z.string().email('Invalid email'), }), }; } // Use in a component (simplified) function App() { return <div>User Management</div>; } export default App;

Debug

Known issues

breakingBreaking changes in v2.0.0: removed deprecated methods `save()` and `destroy()`; use `store()` and `remove()` instead.

fix

Replace calls to `model.save()` with `controller.store(model)` and `model.destroy()` with `controller.remove(model)`.

affects: >=2.0.0 <2.0.0

breakingv2.0.0 rewired internal state management to @tanstack/react-query. Previous direct state access patterns may break.

fix

Ensure all data fetching and mutations go through the QueryClient. Migrate from internal state hooks to useQuery/useMutation patterns.

affects: >=2.0.0

deprecatedThe `attributes` property on models is now deprecated in favor of a new `fields` configuration. It will be removed in v3.

fix

Migrate `attributes` to `fields` in controller settings. See migration guide.

affects: >=2.0.0

gotchaWhen using Zod schemas, the `schema` property is used for both create and update by default. If you need different schemas, define them under `create.schema` and `update.schema`.

fix

Explicitly set `create.schema` and `update.schema` if they differ from the default.

affects: >=1.0.0

gotchaThe package is ESM-only since v2. Do not use require() in Node.js unless your project supports ESM interop.

fix

Use `import` syntax or dynamic import() in CommonJS files.

affects: >=2.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'avnt-react-orm'

Package not installed or missing peer dependencies.

fix

Run `npm install avnt-react-orm @tanstack/react-query react react-dom zod`

TypeError: ControllerBase is not a constructor

Using default import instead of named import for ControllerBase.

fix

Use `import { ControllerBase } from 'avnt-react-orm'` (named import).

Uncaught TypeError: Cannot read properties of undefined (reading 'useQuery')

Missing @tanstack/react-query provider or not using QueryClient.

fix

Wrap your app with <QueryClientProvider client={queryClient}> from @tanstack/react-query.

Upgrade

Version history

2.0.13latest on npm

Audit

Dependencies

@tanstack/react-queryrequiredRequired for server state management, data fetching, and caching

reactrequiredPeer dependency for React 18 features

react-domrequiredPeer dependency for React DOM rendering

zodrequiredRequired for schema validation in controllers

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

packageavnt-react-orm ↗