LearnReferenceBlog
React SDK

useStaticRecordQuery

This is a React hook to get a single static record.

const {record} = useStaticRecordQuery({filter: {...}});

Call useStaticRecordQuery at the top level of your component to get a record back.

function Profile() {
  const {isLoading, record} = useRecordQuery({
    filter: queryType(ProfileRecord),
  });

  if (isLoading || !record) {
    // Render fallback.
  }

  return <div>Occupation: {record.content.occupation}</div>;
}

Parameters

Returns

This hook returns a UseStaticRecordQueryResult­ object.

Notes

  • The hook only returns a record if the query matches one and only one record.

  • A matching record may be returned immediately while the request is in flight.

  • After the request completes, the record will not change until the query changes.

  • Proxied queries are supported.

  • It can be used with an unauthenticated <Store> (proxied queries only).

  • refreshIntervalSeconds int optional

    • How often to refresh, in seconds.

  • isLoading boolean

    • Whether the query is currently being performed.

  • error BaqError optional

    • An error that happened while performing the query, if any.

  • record Record optional

    • Resulting record, if found.

  • deferredRecord Record optional

    • Same as record but when the query changes it only gets updated after the request completes. This is helpful to keep the previous view on screen while loading new data.

  • getRecord () => Record | undefined

    • Same as record, but compatible with React Suspense­.

      This function throws a promise while the request is in flight.

      The promise completes when the response is received.

  • getDeferredRecord () => Record | undefined

Proxied static queries allow listing public records on other users’ servers.

Here, we use the proxying capability to fetch the Entity record for a given entity. Entity records are unique for a given author, which make them a good candidate for useStaticRecordQuery.

import {Q, EntityRecord} from "@baqhub/sdk";
import {useStaticRecordQuery} from "./baq/store.js";

function Name({entity}) {
  const {isLoading, record} = useStaticRecordQuery({
    filter: Q.and(Q.type(EntityRecord), Q.author(entity)),
    proxyTo: entity,
  });

  if (!record && isLoading) {
    return <Loading />;
  }

  if (!record) {
    return <NotFound />;
  }

  return <div>Name: {record.content.profile.name}</div>;
}

Proxied queries do not support realtime updates, but they can still be refreshed automatically. In this example, we refresh the user’s profile every minute.

import {Q, EntityRecord} from "@baqhub/sdk";
import {useStaticRecordQuery} from "./baq/store.js";

function Name({entity}) {
  const {isLoading, record} = useStaticRecordQuery(
    {
      filter: Q.and(Q.type(EntityRecord), Q.author(entity)),
      proxyTo: entity,
    },
    {
      refreshIntervalSeconds: 60,
    }
  );

  if (!record) {
    return <NotFound />;
  }

  return <div>Name: {record.content.profile.name}</div>;
}

There are multiple hooks to get a single record from the store. But when it’s a record that might not be in the store yet, useStaticRecordQuery is a convenient way to fetch it.

In this example we fetch a Post record and we display its content. If the record is already in the store, it will be displayed right away without an intermediate loading screen.

import {Query} from "@baqhub/sdk";
import {useStaticRecordQuery} from "./baq/store.js";

function Post({postKey}) {
  const {isLoading, record} = useStaticRecordQuery(
    Query.ofKey(postKey, {proxyTo: entity})
  );

  if (!record && isLoading) {
    return <Loading />;
  }

  if (!record) {
    return <NotFound />;
  }

  return (
    <div>
      <div>Author: {record.author.entity}</div>
      <div>Content: {record.content.text}</div>
    </div>
  );
}
© 2024 Quentez