Skip to main content

Entity Validation

Entity.validate() is called during normalization and denormalization. undefined indicates no error, and a string error message if there is an error.

Field check

Validation happens after Entity.process() but before Entity.fromJS(), thus operates on POJOs rather than an instance of the class.

Here we can make sure the title field is included, and of the expected type.

Fixtures
GET /article/1: { "id": "1", "title": "first" }
GET /article/2: { "id": "2" }
GET /article/3: { "id": "3", "title": { "complex": "second", "object": 5 } }
Live Editor
class Article extends Entity {
readonly id: string = '';
readonly title: string = '';
pk() {
return this.id;
}
static validate(processedEntity) {
if (!Object.hasOwn(processedEntity, 'title')) return 'missing title field';
if (typeof processedEntity.title !== 'string') return 'title is wrong type';
}
}
const getArticle = new RestEndpoint({
path: '/article/:id',
schema: Article,
});
function ArticlePage({ id }: { id: string }) {
const article = useSuspense(getArticle, { id });
return <div>{article.title}</div>;
}
render(<ArticlePage id="2" />);
Live Preview
Loading...
Store

All fields check

Here's a recipe for checking that every defined field is present.

Fixtures
GET /article/1: { "id": "1", "title": "first" }
GET /article/2: { "id": "2" }
GET /article/3: { "id": "3", "title": { "complex": "second", "object": 5 } }
Live Editor
class Article extends Entity {
readonly id: string = '';
readonly title: string = '';
pk() {
return this.id;
}
static validate(processedEntity) {
if (
!Object.keys(this.defaults).every(key =>
Object.hasOwn(processedEntity, key),
)
)
return 'a field is missing';
}
}
const getArticle = new RestEndpoint({
path: '/article/:id',
schema: Article,
});
function ArticlePage({ id }: { id: string }) {
const article = useSuspense(getArticle, { id });
return <div>{article.title}</div>;
}
render(<ArticlePage id="2" />);
Live Preview
Loading...
Store

Partial results

Another great use of validation is mixing endpoints that return incomplete objects. This is often useful when some fields consume lots of bandwidth or are computationally expensive for the backend.

Consider using validateRequired to reduce code.

Fixtures
GET /article: [ { "id": "1", "title": "first" }, { "id": "2", "title": "second" } ]
GET /article/1: { "id": "1", "title": "first", "content": "long", "createdAt": "2011-10-05T14:48:00.000Z" }
GET /article/2: { "id": "2", "title": "second", "content": "short", "createdAt": "2011-10-05T14:48:00.000Z" }
Live Editor
class ArticlePreview extends Entity {
readonly id: string = '';
readonly title: string = '';
pk() {
return this.id;
}
static get key() {
return 'Article';
}
}
const getArticleList = new RestEndpoint({
path: '/article',
schema: [ArticlePreview],
});
class ArticleFull extends ArticlePreview {
readonly content: string = '';
readonly createdAt: Date = new Date(0);
static schema = {
createdAt: Date,
};
static validate(processedEntity) {
if (!Object.hasOwn(processedEntity, 'content')) return 'Missing content';
}
}
const getArticle = new RestEndpoint({
path: '/article/:id',
schema: ArticleFull,
});
function ArticleDetail({ id, onHome }: { id: string; onHome: () => void }) {
const article = useSuspense(getArticle, { id });
return (
<div>
<h4>
<a onClick={onHome} style={{ cursor: 'pointer' }}>
&lt;
</a>{' '}
{article.title}
</h4>
<div>
<p>{article.content}</p>
<div>
Created:{' '}
<time>
{Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(
article.createdAt,
)}
</time>
</div>
</div>
</div>
);
}
function ArticleList() {
const [route, setRoute] = React.useState<string>();
const articles = useSuspense(getArticleList);
if (!route) {
return (
<div>
{articles.map(article => (
<div
key={article.pk()}
onClick={() => setRoute(article.id)}
style={{ cursor: 'pointer', textDecoration: 'underline' }}
>
Click me: {article.title}
</div>
))}
</div>
);
}
return <ArticleDetail id={route} onHome={() => setRoute()} />;
}
render(<ArticleList />);
Live Preview
Loading...
Store