title |
---|
schema.Array |
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import LanguageTabs from '@site/src/components/LanguageTabs'; import HooksPlayground from '@site/src/components/HooksPlayground'; import { RestEndpoint } from '@rest-hooks/rest';
Creates a schema to normalize an array of schemas. If the input value is an Object instead of an Array
,
the normalized result will be an Array
of the Object's values.
Note: The same behavior can be defined with shorthand syntax: [ mySchema ]
definition
: required A singular schema that this array contains or a mapping of schema to attribute values.schemaAttribute
: optional (required ifdefinition
is not a singular schema) The attribute on each entity found that defines what schema, per the definition mapping, to use when normalizing. Can be a string or a function. If given a function, accepts the following arguments: _value
: The input value of the entity. _parent
: The parent object of the input array. *key
: The key at which the input array appears on the parent object.
:::tip
For unbounded collections with string
keys, use schema.Values
:::
define(definition)
: When used, thedefinition
passed in will be merged with the original definition passed to theArray
constructor. This method tends to be useful for creating circular references in schema.
To describe a simple array of a singular entity type:
<HooksPlayground groupId="schema" defaultOpen="y" fixtures={[ { endpoint: new RestEndpoint({path: '/users'}), args: [], response: [ { id: '123', name: 'Jim' }, { id: '456', name: 'Jane' }, ], delay: 150, }, ]}>
export class User extends Entity {
id = '';
name = '';
pk() {
return this.id;
}
}
export const getUsers = new RestEndpoint({
path: '/users',
schema: new schema.Array(User),
});
function UsersPage() {
const users = useSuspense(getUsers);
return (
<div>
{users.map(user => (
<div key={user.pk()}>{user.name}</div>
))}
</div>
);
}
render(<UsersPage />);
If your input data is an array of more than one type of entity, it is necessary to define a schema mapping.
:::note
If your data returns an object that you did not provide a mapping for, the original object will be returned in the result and an entity will not be created.
:::
<HooksPlayground groupId="schema" defaultOpen="y" fixtures={[ { endpoint: new RestEndpoint({path: '/feed'}), args: [], response: [ { id: 1, type: 'link', url: 'https://ntucker.true.io', title: 'Nate site' }, { id: 10, type: 'post', content: 'good day!' }, ], delay: 150, }, ]}>
export abstract class FeedItem extends Entity {
readonly id: number = 0;
declare readonly type: 'link' | 'post';
pk() {
return `${this.id}`;
}
}
export class Link extends FeedItem {
readonly type = 'link' as const;
readonly url: string = '';
readonly title: string = '';
}
export class Post extends FeedItem {
readonly type = 'post' as const;
readonly content: string = '';
}
export const getFeed = new RestEndpoint({
path: '/feed',
schema: new schema.Array(
{
link: Link,
post: Post,
},
'type',
),
});
import { getFeed, Link, Post } from './api/Feed';
function FeedList() {
const feedItems = useSuspense(getFeed);
return (
<div>
{feedItems.map(item =>
item.type === 'link' ? (
<LinkItem link={item} key={item.pk()} />
) : (
<PostItem post={item} key={item.pk()} />
),
)}
</div>
);
}
function LinkItem({ link }: { link: Link }) {
return <a href={link.url}>{link.title}</a>;
}
function PostItem({ post }: { post: Post }) {
return <div>{post.content}</div>;
}
render(<FeedList />);
The return values should match a key in the definition
. Here we'll show the same behavior as the 'string'
case, except we'll append an 's'.
<HooksPlayground groupId="schema" defaultOpen="y" fixtures={[ { endpoint: new RestEndpoint({path: '/feed'}), args: [], response: [ { id: 1, type: 'link', url: 'https://ntucker.true.io', title: 'Nate site' }, { id: 10, type: 'post', content: 'good day!' }, ], delay: 150, }, ]}>
export abstract class FeedItem extends Entity {
readonly id: number = 0;
declare readonly type: 'link' | 'post';
pk() {
return `${this.id}`;
}
}
export class Link extends FeedItem {
readonly type = 'link' as const;
readonly url: string = '';
readonly title: string = '';
}
export class Post extends FeedItem {
readonly type = 'post' as const;
readonly content: string = '';
}
export const getFeed = new RestEndpoint({
path: '/feed',
schema: new schema.Array(
{
links: Link,
posts: Post,
},
(input: Link | Post, parent, key) => `${input.type}s`,
),
});
import { getFeed, Link, Post } from './api/Feed';
function FeedList() {
const feedItems = useSuspense(getFeed);
return (
<div>
{feedItems.map(item =>
item.type === 'link' ? (
<LinkItem link={item} key={item.pk()} />
) : (
<PostItem post={item} key={item.pk()} />
),
)}
</div>
);
}
function LinkItem({ link }: { link: Link }) {
return <a href={link.url}>{link.title}</a>;
}
function PostItem({ post }: { post: Post }) {
return <div>{post.content}</div>;
}
render(<FeedList />);