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
api/Profile.ts
import { Entity, createResource } from '@rest-hooks/rest';

export class Profile extends Entity {
readonly id: number | undefined = undefined;
readonly img: string = '';
readonly fullName: string = '';
readonly bio: string = '';

pk() {
return this.id?.toString();
}
}

export const ProfileResource = createResource({
path: '/profiles/:id',
schema: Profile,
})
ProfileList.tsx
import { useDLE } from 'rest-hooks';
import { Skeleton, Card, Avatar } from 'antd';
import { ProfileResource } from 'api/Profile';

const { Meta } = Card;

function ProfileList() {
const { data, loading, error } = useDLE(ProfileResource.getList);
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>
);
}
Conditional Dependencies

Use null as the second argument on any rest hooks to indicate "do nothing."

// todo could be undefined if id is undefined
const todo = useDLE(getTodo, id ? { id } : null);