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

  • query RecordQuery

    • Query to run against the store and user’s server.

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.

  • 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[]

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>
  );
}
© 2024 Quentez