Skip to main content
Version: 2.2

useCacheNew()

function useCacheNew(
fetchShape: ReadShape,
params: object | null,
): Denormalized<typeof fetchShape.schema> | null;
function useCacheNew<Params extends Readonly<object>, S extends Schema>(
fetchShape: Pick<ReadShape<S, Params>, 'schema' | 'getFetchKey'>,
params: Params | null,
): Denormalized<S> | null;

Rest Hooks 3.0

This is the future default behavior of useCache() in version 3.0.

  • 3.0 will keep the legacy version as useCacheLegacy()
  • 3.1 will remove both useCacheLegacy() and useCacheNew(), leaving this behavior in useCache()

Excellent to use data in the normalized cache without fetching.

  • On Error (404, 500, etc):
    • Returns previously cached if exists
    • null otherwise
  • While loading:
    • Returns previously cached if exists
    • null otherwise

Example

Using a type guard to deal with null

function Post({ id }: { id: number }) {
const post = useCacheNew(PostResource.detailShape(), { id });
// post as PostResource | null
if (!post) return null;
// post as PostResource (typeguarded)
// ...render stuff here
}

Paginated data

When entities are stored in nested structures, that structure will remain.

export class PaginatedPostResource extends Resource {
readonly id: number | null = null;
readonly title: string = '';
readonly content: string = '';

static urlRoot = 'http://test.com/post/';

static listShape<T extends typeof Resource>(this: T) {
return {
...super.listShape(),
schema: { results: [this.getEntitySchema()], nextPage: '', lastPage: '' },
};
}
}
function ArticleList({ page }: { page: string }) {
const { results: posts, nextPage, lastPage } = useCacheNew(
PaginatedPostResource.listShape(),
{ page },
);
// posts as PaginatedPostResource[] | null
if (!posts) return null;
// posts as PaginatedPostResource[] (typeguarded)
// ...render stuff here
}

Useful FetchShapes to send

Resource provides these built-in:

  • detailShape()
  • listShape()

Feel free to add your own FetchShape as well.