Skip to main content

useDLE()

function useDLE(
endpoint: ReadEndpoint,
...args: Parameters<typeof endpoint> | [null]
): {
data: Denormalize<typeof endpoint.schema>;
loading: boolean;
error: Error | undefined;
};

In case you cannot use suspense, useDLE() is just like useSuspense() but returns [D]ata [L]oading [E]rror values.

Hook usage

Resource
resources/ProfileResource.ts
export default class ProfileResource extends Resource {
readonly id: number | undefined = undefined;
readonly img: string = '';
readonly fullName: string = '';
readonly bio: string = '';

pk() {
return this.id?.toString();
}
static urlRoot = '/profiles';
}
ProfileList.tsx
import { useDLE } from 'rest-hooks';
import { Skeleton, Card, Avatar } from 'antd';
import ProfileResource from 'resources/ProfileResource';

const { Meta } = Card;

function ProfileList() {
const { data, loading, error } = useDLE(ProfileResource.list());
if (error) return <div>Error {error.status}</div>;
return (
<Card style={{ width: 300, marginTop: 16 }} loading={loading}>
{data.map(profile => (
<Meta
key={profile.pk()}
avatar={<Avatar src={profile.img} />}
title={profile.fullName}
description={profile.bio}
/>
))}
</Card>
);
}