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

UserResource

Unauthed

Authorized

Entry

import { Entity, createResource } from '@data-client/rest';

export class User extends Entity {
  id = '';
  name = '';
  isAdmin = false;
  pk() {
    return this.id;
  }
  static key = 'User';
}
export const UserResource = createResource({
  path: '/users/:id',
  schema: User,
}).extend('current', {
  path: '/user',
  schema: User,
});

import { useLoading } from '@data-client/hooks';
import { UserResource } from './UserResource';

export default function Unauthed() {
  const ctrl = useController();
  const [handleLogin, loading] = useLoading(
    (e: any) => ctrl.fetch(UserResource.current),
    [],
  );
  return (
    <div>
      <p>Not authorized</p>
      {loading ? (
        'logging in...'
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
  );
}

import { User, UserResource } from './UserResource';

export default function Authorized({ user }: { user: User }) {
  const ctrl = useController();
  const handleLogout = (e: any) => ctrl.invalidate(UserResource.current);

  return (
    <div>
      <p>Welcome, {user.name}!</p>
      <button onClick={handleLogout}>Logout</button>
    </div>
  );
}

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 Status	Returns	Conditions
Invalid	undefined	not in store, deletion, invalidation, invalidIfStale
Stale	denormalized	(first-render, arg change) & expiry < now
Valid	denormalized	fetch completion
	undefined	null used as second argument

Conditional Dependencies

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

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

Types

Type

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

With Generics

function useCache<
  E extends Pick<
    EndpointInterface<FetchFunction, Schema | undefined, undefined>,
    'key' | 'schema' | 'invalidIfStale'
  >,
  Args extends readonly [...Parameters<E['key']>] | readonly [null],
>(endpoint: E, ...args: Args): DenormalizeNullable<E['schema']>;

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