Store

Manage the BAQ record store and make it available to child components.

<Store identity={...}>
  ...
</Store>

• Reference­

  • <Store>­

• Usage­

  • Provide an identity to a Store­

  • Unauthenticated Store­

Reference

<Store>

Provide a record store to all components inside. This is required when using any of the store hooks (useRecordQuery, useStaticRecordQuery, and so on).

Props

Notes

• When a <Store> is used without an identity, only the static hooks can be used and only with proxied queries.

Usage

Provide an identity to a Store

Use the useAuthentication­ hook to obtain a StoreIdentity­ object to use with the <Store>.

import {buildAuthentication} from "../baq/authentication.js";
import {Store} from "./baq/store.js";

const {useAuthentication} = buildAuthentication({...});

function App() {
  const authentication = useAuthentication();

  if (authentication.status !== "authenticated") {
    return;
  }

  return (
    <Store identity={authentication.identity}>
      <Home /> {/* Rest of the app */}
    </Store>
  );
}

Unauthenticated Store

A Store can also be used without authentication with static hooks and proxied queries to fetch public records. In this example we retrieve a user profile:

import {buildAuthentication} from "../baq/authentication.js";
import {Store} from "./baq/store.js";

function App() {
  const {profileEntity} = useRoute();
  return (
    <Store>
      <Profile profileEntity={profileEntity} />
    </Store>
  );
}

function Profile({profileEntity}) {
  const {getRecord} = useStaticRecordQuery({
    filter: Q.and(Q.type(EntityRecord), Q.author(profileEntity)),
    proxyTo: profileEntity,
  });

  const {author, profile} = getRecord().content;
  return <div>{profile.name || author.entity}</div>;
}