electric-sql / electric-sql/pglite

`useLiveQuery` doesn't work with `makePGliteProvider`.

Open
#543 1 comment 4 reactions 0 assignees View on GitHub
bug
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.