feat(typescript): add useRow hook for Vue and React to fix issue #5060

crates/bindings-typescript/src/react/index.ts

@@ -1,5 +1,6 @@
 export * from './SpacetimeDBProvider.ts';
 export { useSpacetimeDB } from './useSpacetimeDB.ts';
 export { useTable } from './useTable.ts';
+export { useRow } from './useRow.ts';
 export { useReducer } from './useReducer.ts';
 export { useProcedure } from './useProcedure.ts';

crates/bindings-typescript/src/react/useRow.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { useTable, type UseTableCallbacks } from './useTable';
+import type { UntypedTableDef, RowType } from '../lib/table';
+import type { Prettify } from '../lib/type_util';
+import type { Query } from '../lib/query';
+
+/**
+ * React hook to subscribe to a view or table in SpacetimeDB and receive a single live row.
+ *
+ * This is particularly useful for views that return `t.option(Row)`.
+ *
+ * @param query - A query builder expression (table reference or filtered query).
+ * @param callbacks - Optional callbacks for row insert, delete, and update events.
+ * @returns A tuple of [row, isReady], where row is `undefined` if not found.
+ */
+export function useRow<TableDef extends UntypedTableDef>(
+  query: Query<TableDef>,
+  callbacks?: UseTableCallbacks<Prettify<RowType<TableDef>>>
+): [Prettify<RowType<TableDef>> | undefined, boolean] {
+  const [rows, isReady] = useTable(query, callbacks);
+  const row = useMemo(() => rows[0] ?? undefined, [rows]);
+  return [row, isReady];
+}

crates/bindings-typescript/src/vue/index.ts

@@ -1,5 +1,6 @@
 export * from './SpacetimeDBProvider.ts';
 export { useSpacetimeDB } from './useSpacetimeDB.ts';
 export { useTable } from './useTable.ts';
+export { useRow } from './useRow.ts';
 export { useReducer } from './useReducer.ts';
 export { useProcedure } from './useProcedure.ts';

crates/bindings-typescript/src/vue/useRow.ts

@@ -0,0 +1,26 @@
+import { computed, type Ref, type DeepReadonly } from 'vue';
+import { useTable, type UseTableCallbacks } from './useTable';
+import type { UntypedTableDef, RowType } from '../lib/table';
+import type { Prettify } from '../lib/type_util';
+import type { Query } from '../lib/query';
+
+/**
+ * Vue composable to subscribe to a view or table in SpacetimeDB and receive a single live row.
+ *
+ * This is particularly useful for views that return `t.option(Row)`.
+ *
+ * @param query - A query builder expression (table reference or filtered query).
+ * @param callbacks - Optional callbacks for row insert, delete, and update events.
+ * @returns A tuple of [row, isReady], where row is `undefined` if not found.
+ */
+export function useRow<TableDef extends UntypedTableDef>(
+  query: Query<TableDef>,
+  callbacks?: UseTableCallbacks<Prettify<RowType<TableDef>>>
+): [
+  DeepReadonly<Ref<Prettify<RowType<TableDef>> | undefined>>,
+  DeepReadonly<Ref<boolean>>,
+] {
+  const [rows, isReady] = useTable(query, callbacks);
+  const row = computed(() => rows.value[0] ?? undefined);
+  return [row, isReady];
+}