electric-sql / electric-sql/pglite
`useLiveQuery` doesn't work with `makePGliteProvider`.
- Dominant language
- TypeScript
- Stars
- 16k
- Forks
- 442
- Avg merge
- 20h 19m
- Merged PRs (30d)
- 7
Description
The point of the [`PGliteProvider`](https://pglite.dev/docs/framework-hooks/react#pgliteprovider) is:
> to initiate a PGlite database and pass it to all child components for use with the [usePGlite](https://pglite.dev/#usepglite), [useLiveQuery](https://pglite.dev/#uselivequery), and [useLiveIncrementalQuery](https://pglite.dev/#useliveincrementalquery) hooks.
However, [`makePGliteProvider`](https://pglite.dev/docs/framework-hooks/react#makepgliteprovider) only returns `usePGlite`:
```ts
const { PGliteProvider, usePGlite } = makePGliteProvider<
PGlite &
PGliteInterfaceExtensions<{...}>
>()
```
This means when you make a type-aware PGliteProvider like this, it's not recognised by `useLiveQuery` and friends.
> Uncaught Error: No PGlite instance found, use PGliteProvider to provide one
Here's a minimal repro:
```tsx
import React, { useEffect, useState } from 'react'
import { createRoot } from 'react-dom/client'
import { PGlite, PGliteInterfaceExtensions } from '@electric-sql/pglite'
import { makePGliteProvider, useLiveQuery } from '@electric-sql/pglite-react'
import { type LiveNamespace, live } from '@electric-sql/pglite/live'
type PGliteWithExtensions = PGlite & PGliteInterfaceExtensions<{
live: LiveNamespace
}>
const { PGliteProvider, usePGlite } = makePGliteProvider()
function App() {
const [db, setDb] = useState()
useEffect(() => {
async function init() {
const pglite: PGliteWithExtensions = await PGlite.create({
extensions: {
live,
}
})
setDb(pglite)
}
init()
}, [])
if (db === undefined) {
return null
}
return (
)
}
function Component() {
const results = useLiveQuery('select 1')
return null
}
export function renderApp(el) {
createRoot(el).render(
)
}
// const el = document.getElementById('app')
// renderApp(el)
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.