Skip to main content
Version: 4.1

Usage without Suspense

Some libraries you work with may take a loading or error state. In these cases you might want a boolean loading instead of yielding to Suspense.

useStatefulResource() hook has been published under @rest-hooks/legacy for this purpose.

Installation

yarn add @rest-hooks/legacy
npm install @rest-hooks/legacy

Hook usage

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 { useStatefulResource } from '@rest-hooks/legacy';
import { Skeleton, Card, Avatar } from 'antd';
import ProfileResource from 'resources/ProfileResource';

const { Meta } = Card;

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

API

function useStatefulResource<Params extends Readonly<object>, S extends Schema>(fetchShape: ReadShape<S, Params>, params: Params | null): {
data: DenormalizeNullable<S>;
loading: boolean;
error: (Params extends null ? undefined : Error) | undefined;
};