fireproof-storage / fireproof-storage/fireproof
problem coordinating page behavior involving connect
- 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