useLiveQuery doesn't work with makePGliteProvider.

[thruflo]

The point of the PGliteProvider is:

to initiate a PGlite database and pass it to all child components for use with the usePGlite, useLiveQuery, and useLiveIncrementalQuery hooks.

However, makePGliteProvider only returns usePGlite:

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:

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<PGliteWithExtensions>()

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 (
    <PGliteProvider db={db}>
      <Component />
    </PGliteProvider>
  )
}

function Component() {
  const results = useLiveQuery('select 1')

  return null
}

export function renderApp(el) {
  createRoot(el).render(
    <App />
  )
}

// const el = document.getElementById('app')
// renderApp(el)