LearnReferenceBlog
React SDK

useStaticRecordsQuery

This is a React hook to get a static list of records.

const recordsQuery = useStaticRecordsQuery({filter: {...}})

Call useStaticRecordsQuery at the top level of your component to get records back.

import {useStaticRecordsQuery} from "./baq/store.js";
import {todoRecordType} from "./baq/todoRecord.js";
import {Q, Record} from "@baqhub/sdk";

function TodoList() {
  const {isLoading, records} = useStaticRecordsQuery({
    filter: Q.type(todoRecordType),
  });

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

  return (
    <List>
      {records.map(r => (
        <Todo key={Record.toKey(r)} record={r} />
      ))}
    </List>
  );
}

Parameters

Returns

This hook returns a UseStaticRecordsQueryResult­ object.

Notes

  • The hook does not listen for realtime server updates.

  • The resulting records will not change until the query changes.

  • Proxied queries are supported.

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

  • refreshMode enum optional

    • Control how the hook should refresh its data.

      • "none" default : Don’t automatically refresh.
      • "sync": Fetch newly updated records.
      • "full": Re-fetch all records (incompatible with loadMore()).

  • refreshIntervalSeconds int optional

    • How often to refresh, in seconds.

    • Defaults to 30s if a refreshMode is specified.

  • loadMorePageSize int optional

    • Override query.pageSize when loading more records.

  • isLoading boolean

    • Whether the query is currently being performed.

  • hasResults boolean

    • Whether some results are already available (cached query).

  • error BaqError optional

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

  • records Record[]

    • Resulting array of records.

  • deferredRecords Record[]

    • Same as records 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.

  • getRecords () => Record[]

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

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

      The promise completes when the response is received.

  • getDeferredRecords () => Record[]

  • loadMore () => void | undefined

    • Loads one more page of records.

    • Incompatible with refreshMode=full.

    • Is undefined if all matching records have been fetched.

  • isLoadingMore boolean

    • Whether a query for more data is currently being performed.

Proxied static queries allow listing public records on other users’ servers. Here, we use the proxying capability to display another user’s list of Post records.

import {Q, Record} from "@baqhub/sdk";
import {useStaticRecordsQuery} from "./baq/store.js";
import {postRecord} from "./baq/postRecord.js";

function Profile({profileEntity}) {
  const {isLoading, records} = useStaticRecordsQuery({
    filter: Q.and(Q.type(PostRecord), Q.author(profileEntity)),
    proxyTo: profileEntity,
  });

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

  return (
    <List>
      {records.map(r => (
        <Post key={Record.toVersionHash(r)} record={r} />
      ))}
    </List>
  );
}

There are times when it might not be practical or desired to receive realtime updates, but we may still want to occasionally refresh the view with the latest available records. In this example, we display a list of recent comments that updates every minute.

import {Q, Record} from "@baqhub/sdk";
import {useStaticRecordsQuery} from "./baq/store.js";
import {CommentRecord} from "./baq/commentRecord.js";

function FiveMostRecentComments({profileEntity}) {
  const {isLoading, records} = useStaticRecordsQuery(
    {
      pageSize: 5,
      sort: ["received_at", "descending"],
      filter: Q.type(CommentRecord),
    },
    {
      refreshMode: "full",
      refreshIntervalSeconds: 60,
    }
  );

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

  return (
    <List>
      {records.map(r => (
        <Comment key={Record.toVersionHash(r)} record={r} />
      ))}
    </List>
  );
}
© 2024 Quentez