Use drizzle studio with OP-SQLITE. works with most recent version of op-sqlite and drizzle studio

useDrizzleStudio.ts

/**
 * Local implementation of useDrizzleStudio with op-sqlite support.
 * Based on: https://github.com/slvssb/drizzle-studio-expo/blob/slvssb/op-sqlite-support/src/useDrizzleStudio.tsx
 *
 * Usage:
 *   useDrizzleStudio({ driver: "opsqlite", db: opsqliteDb });
 */
import type { DB } from "@op-engineering/op-sqlite";
import { useDevToolsPluginClient } from "expo/devtools";
import { useEffect } from "react";

type Props = { driver: "opsqlite"; db: DB | null };

type QueryRequest = {
  sql: string;
  params: (string | number)[];
  arrayMode: boolean;
  id: string;
};

export function useDrizzleStudio(props: Props) {
  const client = useDevToolsPluginClient("expo-drizzle-studio-plugin");

  useEffect(() => {
    if (!client || !props.db) return;

    const handleQuery = async (request: QueryRequest) => {
      if (!props.db) return;
      let data: unknown[] = [];

      try {
        if (request.arrayMode) {
          data = await props.db.executeRaw(request.sql, request.params);
        } else {
          const executed = await props.db.execute(request.sql, request.params);
          data = executed.rows._array ?? executed.rows;
        }

        client.sendMessage(`query-${request.id}`, data);
      } catch (error) {
        console.error("[useDrizzleStudio] Query error:", error);
        client.sendMessage(`query-${request.id}`, {
          error: error instanceof Error ? error.message : String(error),
        });
      }
    };

    // Listen for both message formats (different plugin versions)
    const sub1 = client.addMessageListener("query", handleQuery);
    const sub2 = client.addMessageListener("getData", handleQuery);

    return () => {
      sub1?.remove();
      sub2?.remove();
    };
  }, [client, props.db]);
}