How to use useCreatePersister with createCrSqliteWasmPersister and async DB initialization?

[thinkh]

I would like to test the persister-cr-sqlite-wasm in a React application, but I'm struggling with the setup due to the async initialization of the sqlite database.

First, I installed the @vlcn.io/crsqlite-wasm package, something that could be added to the tinybase documentation.

Then I tried to adapt the example from the documentation page and ended up with something like this:

import React, { useEffect, useState } from 'react';
import initWasm from '@vlcn.io/crsqlite-wasm';
import { createCrSqliteWasmPersister } from 'tinybase/persisters/persister-cr-sqlite-wasm';
import { Persister, Store, createStore } from 'tinybase';
import { Provider as TinybaseProvider, useCreatePersister, useCreateStore } from 'tinybase/ui-react';

export function AppStoreProvider({ children }: { children: React.ReactNode }) {
  const store = useCreateStore(() => createStore().setTablesSchema({...}));

  const [sqliteDb, setSqliteDb] = useState(null);
  useEffect(() => {
    (async () => {
      const crSqlite3 = await initWasm();
      const db = await crSqlite3.open();
      setSqliteDb(db);
    })();

    return () => {
      sqliteDb?.close();
    };
  });

  useCreatePersister(
    store,
    (store) => {
      // ----> `sqliteDb` is `null` on first function call and initializes an invalid persister
      return createCrSqliteWasmPersister(store, sqliteDb, 'my-key');
    },
    [sqliteDb],
    async (persister: TinybasePersister) => {
	  await persister.startAutoLoad();
	  await persister.startAutoSave();
	},
  );

  return (
    <TinybaseProvider
      storesById={{ ... }}
      relationshipsById={{ ... }}
    >
      {children}
    </TinybaseProvider>
  );
}

The problem is that sqliteDb is null on the first run and will create an invalid persister which fails in the startAutoLoad() below.

How can I make this example working? What is missing to initialize the SQLite DB correctly?

[thinkh]

The same question seems to be valid for the createPowerSyncPersister that offers a react hook.

import React, { useEffect, useState } from 'react';
import { usePowerSync } from '@powersync/react';
import { createPowerSyncPersister } from 'tinybase/persisters/persister-powersync';
import { Persister, Store, createStore } from 'tinybase';
import { Provider as TinybaseProvider, useCreatePersister, useCreateStore } from 'tinybase/ui-react';

export function AppStoreProvider({ children }: { children: React.ReactNode }) {
  const store = useCreateStore(() => createStore().setTablesSchema({...}));

  const ps = usePowerSync();

  useCreatePersister(
    store,
    (store) => {
      // ----> `ps` is `null` on first function call and initializes an invalid persister
      return createPowerSyncPersister(store, ps, 'my-key');
    },
    [ps],
    async (persister: TinybasePersister) => {
	  await persister.startAutoLoad();
	  await persister.startAutoSave();
	},
  );

  return (
    <TinybaseProvider
      storesById={{ ... }}
      relationshipsById={{ ... }}
    >
      {children}
    </TinybaseProvider>
  );
}

I get the following error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'onChange')
    at eval (eval at ./node_modules/tinybase/lib/persisters/persister-powersync.js (app.8ddd3a66.js:36403:1), <anonymous>:264:46)
    at eval (eval at ./node_modules/tinybase/lib/persisters/persister-powersync.js (app.8ddd3a66.js:36403:1), <anonymous>:258:13)
    at Object.startAutoLoad (eval at ./node_modules/tinybase/lib/persisters/persister-powersync.js (app.8ddd3a66.js:36403:1), <anonymous>:108:98)