Available today, this new release of the BAQ React SDK­ comes with exciting new features to make it even easier to fetch and display records:

• Infinite loading­

• Auto-refresh static queries­

• Unauthenticated <Store> support­

Infinite loading

When dealing with large quantities of data, it’s often preferable to only fetch a subset at first and then load more as needed.

Support for this is now built-in through two new properties returned by the useRecordsQuery()­ and useStaticRecordsQuery()­ hooks:

Here it is in action with a list of comments:

function Comments(postLink) {
  // The pageSize is used for both the initial request
  // and then later when loading more.
  const {getRecords, loadMore, isLoadingMore} = useRecordsQuery({
    pageSize: 20,
    sort: ["received_at", "ascending"],
    filter: Q.and(
      Q.type(CommentRecord),
      Q.link(QueryLink.pathLink("content.post", postLink))
    ),
  });

  // loadMore() can be called multiple times.
  // If a request is in flight it will be ignored.
  return (
    <InfiniteList onEndReached={loadMore}>
      {getRecords().map(...)}
      {isLoadingMore && <LoadingMore />}
    </InfiniteList>
  );
}

Auto-refresh static queries

There are situations when static queries are preferable to live, realtime queries:

Nevertheless, it might still be convenient to refresh the records from time to time, depending on the use case. This is where the new options for useStaticRecordQuery()­ and useStaticRecordsQuery()­ come in:

And here’s an example where we refresh the posts from John every 60s:

const {isLoading, getRecords} = useStaticRecordsQuery(
  {
    pageSize: 20,
    filter: Q.and(Q.type(PostRecord), Q.author("john.baq.run")),
    proxyTo: "john.baq.run",
  },
  {
    refreshMode: "sync",
    refreshIntervalSeconds: 60,
  }
);

Unauthenticated <Store> support

Many features of the SDK are designed to interact with a BAQ server as an authenticated user, but with this release it is now possible to have a <Store>­ component with no identity for use on public webpages, without an authenticated user.

This feature was used to implement public profile pages like this one­.

Here’s what the code looks like to fetch a basic user profile:

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

function App() {
  return (
    <Store>
      <Profile profileEntity="john.baq.run" />
    </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>;
}

The demo apps have been updated to take advantage of the new SDK, and I’m excited to see what people build with these new features!