fireproof-storage / fireproof-storage/fireproof

problem coordinating page behavior involving connect

Open
#402 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
973
Forks
58
PR merge metrics
No merged PRs in 30d

Description

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?

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the React flow in Document.tsx and start by tracing connect through connection-base.ts, store.ts, database.ts, and utils.ts. Compare the timing of cx.loaded with database.get for a document that arrives through sync. Done means the document loads reliably without a fixed sleep and without the reported console errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
databases, distributed-systems, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.