Skip to main content
Version: 4.5

useResourceLegacy()

function useResourceLegacy(fetchShape: ReadShape, params: object | null):
  SchemaOf<typeof fetchShape.schema>;

function useResourceLegacy(...[fetchShape: ReadShape, params: object | null]):
  SchemaOf<typeof fetchShape.schema>[];
function useResourceLegacy<
  Params extends Readonly<object>,
  S extends Schema
>(fetchShape: ReadShape<S, Params>, params: Params | null): SchemaOf<S>;

function useResourceLegacy<
  Params extends Readonly<object>,
  S extends Schema
>(...[fetchShape: ReadShape<S, Params>, params: Params | null]): SchemaOf<S>[];

Rest Hooks 3.1 - Removal​

This hook is deprecated in favor of useResource()

  • 3.1 will remove useResourceLegacy()

Excellent for retrieving the data you need.

Cache policy is Stale-While-Revalidate by default but also configurable.

  • Triggers fetch:
    • On first-render and when parameters change
    • and When not in cache or result is considered stale
    • and When no identical requests are in flight
    • and when params are not null
  • On Error (404, 500, etc):
  • While Loading:

Single​

function Post({ id }: { id: number }) {
  const post = useResourceLegacy(PostResource.detailShape(), { id });
  // post as PostResource
}

List​

function Posts() {
  const posts = useResourceLegacy(PostResource.listShape(), {});
  // posts as PostResource[]
}

Parallel​

function Posts() {
  const [user, posts] = useResourceLegacy(
    [UserResource.detailShape(), { id: userId }],
    [PostResource.listShape(), { userId }],
  );
  // user as UserResource
  // posts as PostResource[]
}

Sequential​

function PostWithAuthor() {
  const post = useResourceLegacy(PostResource.detailShape(), { id });
  // post as PostResource
  const author = useResourceLegacy(UserResource.detailShape(), {
    id: post.userId,
  });
  // author as UserResource
}

Useful FetchShapes to send​

Resource provides these built-in:

  • detailShape()
  • listShape()

Feel free to add your own FetchShape as well.