API reference › @evolu/vue › createEvoluBinding

function createEvoluBinding<
  S extends Readonly<
    Record<string, Readonly<Record<string, AnyStandardSchemaV1>>>
  >,
  D extends Readonly<
    Record<string, Readonly<Record<string, AnyStandardSchemaV1>>>
  > = EmptyEvoluSchema,
>(): VueBinding<S, D>;

Defined in: createEvoluBinding.ts:153

Returns useEvolu, useEvoluApp, useDeviceEvolu, and the query composables typed with the app's schema and its device schema, for an app that EvoluAppProvider provides. useQuery and useQueries then take only queries of the app's tables, and useDeviceQuery and useDeviceQueries only queries of its device tables. It only types them. Its useEvolu and the composables of the app's tables also read an instance of createEvolu that provideEvolu or EvoluProvider provides.

Example

import {
  assertType,
  createQueryBuilder,
  id,
  NonEmptyTrimmedString100,
  testEvoluSchema,
  type AppOwnerEvolu,
  type DeviceEvolu,
  type EvoluApp,
  type QueryRows,
  type TestEvoluSchema,
} from "@evolu/common";
import { createEvoluBinding, type VueBinding } from "@evolu/vue";
import type { Ref } from "vue";

const DeviceSchema = {
  setting: { id: id("Setting"), name: NonEmptyTrimmedString100 },
};
const allTodos = createQueryBuilder(testEvoluSchema)((db) =>
  db.selectFrom("todo").selectAll(),
);
const allSettings = createQueryBuilder(DeviceSchema)((db) =>
  db.selectFrom("setting").selectAll(),
);

// Call them in component setup under EvoluAppProvider.
const binding = createEvoluBinding<TestEvoluSchema, typeof DeviceSchema>();
assertType<typeof binding, VueBinding<TestEvoluSchema, typeof DeviceSchema>>();
const {
  useEvolu,
  useEvoluApp,
  useDeviceEvolu,
  useQuery,
  useQueries,
  useDeviceQuery,
  useDeviceQueries,
} = binding;

const useTodos = () => useQuery(allTodos);
const useSettings = () => useDeviceQuery(allSettings);
const useBoth = () => {
  const [todos] = useQueries([allTodos]);
  const [settings] = useDeviceQueries([allSettings]);
  return [todos, settings] as const;
};
// @ts-expect-error A query of the app's tables isn't one of its device tables.
const useTodosOfDevice = () => useDeviceQuery(allTodos);

type TodoRows = QueryRows<typeof allTodos.Row>;
type SettingRows = QueryRows<typeof allSettings.Row>;
assertType<
  [
    ReturnType<typeof useEvolu>,
    ReturnType<typeof useEvoluApp>,
    ReturnType<typeof useDeviceEvolu>,
    ReturnType<typeof useTodos>,
    ReturnType<typeof useSettings>,
    ReturnType<typeof useBoth>,
  ],
  [
    AppOwnerEvolu<TestEvoluSchema>,
    EvoluApp<TestEvoluSchema, typeof DeviceSchema>,
    DeviceEvolu<typeof DeviceSchema>,
    Readonly<Ref<TodoRows>>,
    Readonly<Ref<SettingRows>>,
    readonly [Readonly<Ref<TodoRows>>, Readonly<Ref<SettingRows>>],
  ]
>();
void useTodosOfDevice;
Markdown for LLMs