LearnReferenceBlog
React SDK

useRecordHelpers

This is a React hook to access data from the record store.

const helpers = useRecordHelpers();

Call useRecordHelpers at the top level of your component to access the helper properties and functions.

Returns

This hook returns a RecordHelpers­ object.

Notes

  • This hook will not re-render when the store changes. Hook versions of these functions are available to always render up-to-date data.

  • These functions provide synchronous access to the latest store data. This data can be temporarily different from the data used in the latest render. To render consistent UI, prefer the hook versions.

  • entity string

    • Entity of the current authenticated user.

  • client Client

    • An authenticated Client­ to make requests against the user’s BAQ server.

  • recordByVersion<T>(version: VersionHash<T>): T

    • Find a record already in the store by its Version­.

      Throws an error if the record could not be found.

      The return type is inferred from the version type.

  • recordByKey<T>(key: RecordKey<T>): T

    • Find a record already in the store by its Key­.

      Throws an error if the record could not be found.

      The return type is inferred from the key type.

  • findRecordByKey<T>(key: RecordKey<T>): T | undefined

    • Find a record already in the store by its Key­.

      Returns undefined if the record could not be found.

      The return type is inferred from the key type.

  • findRecordByQuery<T>(query: Query<T>): T | undefined

    • Find the first matching record already in the store from a Query­.

      Returns undefined if no matching record could be found.

      The return type is inferred from the query type.

  • buildBlobUrl(record: Record, blob: BlobLink, expIn?: number): string

    • Build an authenticated URL for the requested blob in the requested record.

      The expiry is expressed in seconds from now.

      When no expiry time is specified, the resulting URL will be stable over future calls from anywhere between 0 and 90 days. This makes it possible to leverage browser caching of private blobs.

Keys are convenient to pass in between components to reference records known to exist in the store. findRecordByKey is synchronous and indexed, making it practical to use without restrictions.

import {useRecordHelpers} from "./baq/store.js";

function Item({itemKey}) {
  const {findRecordByKey} = useRecordHelpers();
  const itemRecord = findRecordByKey(itemKey);

  return <li>{itemRecord.content.title}</li>;
}

Using a query is a good way to find adjacent records that are known to be in the store. In this example, we find the EntityRecord­ for the provided entity in order to display its name.

import {useRecordHelpers} from "./baq/store.js";

function RecipientName({recipientEntity}) {
  const {tryFindRecordByQuery} = useRecordHelpers();
  const recipientEntityRecord = tryFindRecordByQuery({
    filter: queryAnd(
      queryType(entityRecordType),
      queryAuthor(recipientEntity)
    )
  });

  if (!recipientEntityRecord) {
    return <span>{recipientEntity}</span>;
  }

  return (
    <span>
      {recipientEntityRecord.content.profile.name}
    </span>
  );
}

Using buildBlobUrl makes it possible to synchronously build authenticated URLs for public and private blobs. In this example, the blob is a user’s profile avatar that we display in an img tag.

import {useRecordHelpers} from "./baq/store.js";

function UserAvatar({entityRecord}) {
  const {blobUrlBuilder} = useRecordHelpers();
  const {avatar} = entityRecord.content.profile;

  if (!avatar) {
    return <Placeholder />;
  }

  const avatarUrl = buildBlobUrl(entityRecord, avatar);
  return <img src={avatarUrl} />;
}
© 2024 Quentez