Skip to main content
Version: 5.0

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​

npm install --save @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.detail(),
    {},
  );
  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>(
  endpoint: ReadEndpoint<(p:Params) => Promise<any>, S>, params: Params | null
  ): {
    data: DenormalizeNullable<S>;
    loading: boolean;
    error: (Params extends null ? undefined : Error) | undefined;
};