Debug mode (React Only)

import { init, tx, id } from '@instantdb/react'

// Visit https://instantdb.com/dash to get your APP_ID :)
const APP_ID = 'REPLACE ME'
const db = init({ appId: APP_ID })

function App() {
  const {
    isLoading,
    error,
    data,
    // 👇
    debugRef,
  } = db.useQuery({ messages: {} })
  if (isLoading) {
    return <div>Loading...</div>
  }
  if (error) {
    return <div>Error: {error.message}</div>
  }

  return (
    <div
      style={{ padding: '8px', backgroundColor: '#1e293b', height: '100vh' }}
    >
      <div style={{ marginBottom: '8px', color: 'white' }} ref={debugRef}>
        Num Sent Yos: {data.messages.length}
      </div>
      <button
        style={{ padding: '8px', border: '1px solid white', color: 'white' }}
        onClick={() => db.transact(tx.messages[id()].update({ text: 'Yo' }))}
      >
        Send Yo
      </button>
    </div>
  )
}

export default App