Skip to main content

useCache()

Data rendering without the fetch.

Access any Endpoint's response. If the response does not exist, returns undefined. This can be used to check for an Endpoint's existance like for authentication.

useCache() is reactive to data mutations; rerendering only when necessary.

Usage

import { UserResource } from './UserResource';
import Unauthed from './Unauthed';
import Authorized from './Authorized';

function AuthorizedPage() {
  // currentUser as User | undefined
  const currentUser = useCache(UserResource.current);
  // user is not logged in
  if (!currentUser) return <Unauthed />;
  // currentUser as User (typeguarded)
  return <Authorized user={currentUser} />;
}
render(<AuthorizedPage />);
🔴 Live Preview
Store

See truthiness narrowing for more information about type handling

Behavior

Expiry StatusReturnsConditions
Invalidundefinednot in store, deletion, invalidation, invalidIfStale
Staledenormalized(first-render, arg change) & expiry < now
Validdenormalizedfetch completion
undefinednull used as second argument
Conditional Dependencies

Use null as the second argument to any Data Client hook means "do nothing."

// todo could be undefined if id is undefined
const todo = useCache(TodoResource.get, id ? { id } : null);

Types

function useCache(
endpoint: ReadEndpoint,
...args: Parameters<typeof endpoint> | [null]
): Denormalize<typeof endpoint.schema> | null;

Examples

More Demos

Github Navbar login/logout

Our current user only exists when we are authenticated. Thus we can useCache(UserResource.current) to determine whether to show the login or logout navigation buttons.

More Demos

Github Comment Authorization

Here we only show commenting form if the user is authenticated.

More Demos