API reference › @evolu/vue › waitForRows

function waitForRows(
  ...rows: readonly Readonly<Ref<QueryRows, QueryRows>>[]
): Promise<void>;

Defined in: useQuery.ts:158

Waits for the first load of each query whose rows useQuery, useQueries, useDeviceQuery, or useDeviceQueries returned, so an async setup under <Suspense> renders once they loaded, and <Suspense> shows its fallback meanwhile. Call the composables before awaiting it, because a composable can't run after an await in setup().

It rejects with the UnknownError of the first load SQLite fails, so the error reaches onErrorCaptured of a component above, and it's not also reported as an unhandled rejection. A later refresh, also one SQLite fails, changes nothing it waited for. It stays pending for rows of an instance whose database's deletion, or its AppOwner's removal, disposed it, as React's useQuery stays suspended until the app replaces the instance, and while a refused database answers no load, until the instance's disposal resolves the load with no rows. Observe EvoluErrorDep.evoluError to show the refusal. Rows that none of these composables returned are a defect, so it throws.

Example

import {
  assertType,
  createQueryBuilder,
  testEvoluSchema,
  type QueryRows,
} from "@evolu/common";
import { useQueries, useQuery, waitForRows } from "@evolu/vue";
import type { Ref } from "vue";

const createQuery = createQueryBuilder(testEvoluSchema);
const allTodos = createQuery((db) => db.selectFrom("todo").selectAll());
const allProjects = createQuery((db) => db.selectFrom("project").selectAll());

// An async setup of a component under <Suspense>.
const setup = async () => {
  // oxlint-disable-next-line react/rules-of-hooks -- Composables run before the await.
  const todos = useQuery(allTodos);
  // oxlint-disable-next-line react/rules-of-hooks -- Composables run before the await.
  const [projects] = useQueries([allProjects]);
  // A failure reaches onErrorCaptured of a component above.
  await waitForRows(todos, projects);
  return { todos, projects };
};

assertType<
  Awaited<ReturnType<typeof setup>>["todos"],
  Readonly<Ref<QueryRows<typeof allTodos.Row>>>
>();
Markdown for LLMs