Skip to main content
Version: 4.5

useCache()

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

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 = useCache(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.asSchema()], nextPage: '', lastPage: '' },    };  }}
function ArticleList({ page }: { page: string }) {  const { results: posts, nextPage, lastPage } = useCache(    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.