problem coordinating page behavior involving connect

[mschoch]

I have a react component which expects to find 2 parameters in the URL (database name, doc id). It expects to open the name database, set up a sync with a remote endpoint, and load the document with the provided doc id. I expect in most cases the document will not exist yet locally, only after sync has been established.

In the past, this "just worked'. Maybe that was always an accident, but I suspect that something in the connect call previously blocked in a way that it no longer does.

Let me illustrate the one pattern that does work:

export function Document() {
    const { name, docID } = useParams()
    const { database} = useFireproof(name)
    const [docContent, setDocContent] = useState('');

    const [actuallyReady, setActuallyReady] = useState(false);

    const cx = connect(database, '', 'https://' + window.location.hostname);
    cx.loaded.then(value => {
        window.setTimeout(args => {
            setActuallyReady(true);
            console.log("connected", cx);
        }, 5000)
    })


    useEffect(() => {
        const fetchItem = async () => {
            const doc = (await database.get(docID!)) as DatabaseDoc
            setDocContent(JSON.stringify(doc, null, 4))
        }
        fetchItem()
    }, [docID, database, actuallyReady])

  ...

Note, that in this case, I wait for cx.loaded to resolve, and then I wait an additional 5s. When I do this, and wait the full 5s, although I get errors in the console, the doc eventually loads correctly.

Errors I see in the console:

Uncaught (in promise) Error: Not found: 0193458d-2f46-770b-bf57-52d78473caef - {"module":"CRDT"}
    g utils.ts:323
    t database.ts:90
    promise callback*get database.ts:89
    yw Document.tsx:30
    yw Document.tsx:33
    React 3
    _ scheduler.production.min.js:13
    T scheduler.production.min.js:14
    7756 scheduler.production.min.js:14
    Webpack 12
utils.ts:323:7
Uncaught (in promise) TypeError: e is null
    s store.ts:166
    updateParentsFromDbMetas store.ts:166
    load store.ts:189
    loaded connection-base.ts:68
    promise callback*connectMeta_X connection-base.ts:67
    connect_X connection-base.ts:48
    gw index.ts:48
    once resolve-once.ts:113
    gw index.ts:45
    yw Document.tsx:19
    React 6
    _ scheduler.production.min.js:13
    T scheduler.production.min.js:14
    7756 scheduler.production.min.js:14
    Webpack 12
store.ts:166:62

Without the sleep I see the same errors, but never get the content loaded. I have tried useDocument, and different variations of waiting for cx.loaded, all to no avail.

How can I do this correctly, without getting any errors in the console, and without having to wait 5s?

[mschoch]

With help from @icidasset I was able to eliminate the errors, and have the application behave correctly. However, this work around (developed by Steven) does not appear to be the correct final resolution.

The updated logic I'm currently using is this:

export function Document() {
    const { name, docID } = useParams()
    const { database} = useFireproof(name)
    const [docContent, setDocContent] = useState('');
    const [actuallyReady, setActuallyReady] = useState(false);

    const cx = connect(database, '', 'https://' + window.location.hostname);
    cx.loader?.ready().then(value => {
        console.log('cx loader ready');
        cx.loader?.remoteMetaStore?.load().then(value1 => {
            console.log('remote meta store loaded');
            setActuallyReady(true);
            console.log("connected", cx);
        })
    })

    useEffect(() => {
        if (actuallyReady) {
            const fetchItem = async () => {
                const doc = (await database.get(docID!)) as DatabaseDoc
                setDocContent(JSON.stringify(doc, null, 4))
            }
            fetchItem()
        }
    }, [actuallyReady])

Related Discord Discussions:
https://discord.com/channels/1142273421674303619/1313159633870913607/1313171944551616573
https://discord.com/channels/1142273421674303619/1313181964844531712/1313195321446371372