Skip to main content

schema.All

Retrieves all entities in cache as an Array.

  • definition: required A singular Entity that this array contains or a mapping of attribute values to Entities.
  • schemaAttribute: optional (required if definition 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.

Instance Methods

  • define(definition): When used, the definition passed in will be merged with the original definition passed to the All constructor. This method tends to be useful for creating circular references in schema.

Usage

To describe a simple array of a singular entity type:

Fixtures
GET /users
[{"id":"123","name":"Jim"},{"id":"456","name":"Jane"}]
POST /users
{"id":"777","name":"ABC"}
api/User.ts
export class User extends Entity {
id = '';
name = '';
pk() {
return this.id;
}
}
export const createUser = new RestEndpoint({
path: '/users',
schema: User,
body: { name: '' },
method: 'POST'
});
NewUser.tsx
import { useController } from '@rest-hooks/react';
import { createUser } from './api/User';
export default function NewUser() {
const { fetch } = useController();
const handlePress = React.useCallback(
async (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
fetch(createUser, {name: e.currentTarget.value});
e.currentTarget.value = '';
}
},
[fetch],
);
return <input onKeyPress={handlePress}/>;
}
UsersPage.tsx
import { schema, RestEndpoint } from '@rest-hooks/rest';
import { User } from './api/User';
import NewUser from './NewUser';
const getUsers = new RestEndpoint({
path: '/users',
schema: new schema.All(User),
});
function UsersPage() {
const users = useSuspense(getUsers);
return (
<div>
{users.map(user => (
<div key={user.pk()}>{user.name}</div>
))}
<NewUser />
</div>
);
}
render(<UsersPage />);
Live Preview
Loading...
Store
    • {} 0 keys
      • {} 0 keys
        • {} 0 keys
          • {} 0 keys
            • {} 0 keys
              • 0

            Polymorphic types

            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.

            string schemaAttribute

            Fixtures
            GET /feed
            [{"id":1,"type":"link","url":"https://ntucker.true.io","title":"Nate site"},{"id":10,"type":"post","content":"good day!"}]
            api/Feed.ts
            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.All(
            {
            link: Link,
            post: Post,
            },
            'type',
            ),
            });
            FeedList.tsx
            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 />);
            Live Preview
            Loading...
            Store
              • {} 0 keys
                • {} 0 keys
                  • {} 0 keys
                    • {} 0 keys
                      • {} 0 keys
                        • 0

                      function schemaAttribute

                      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'.

                      Fixtures
                      GET /feed
                      [{"id":1,"type":"link","url":"https://ntucker.true.io","title":"Nate site"},{"id":10,"type":"post","content":"good day!"}]
                      api/Feed.ts
                      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.All(
                      {
                      links: Link,
                      posts: Post,
                      },
                      (input: Link | Post, parent, key) => `${input.type}s`,
                      ),
                      });
                      FeedList.tsx
                      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 />);
                      Live Preview
                      Loading...
                      Store
                        • {} 0 keys
                          • {} 0 keys
                            • {} 0 keys
                              • {} 0 keys
                                • {} 0 keys
                                  • 0