### Install Expo Drizzle Studio Plugin Source: https://github.com/drizzle-team/drizzle-studio-expo/blob/main/README.md Installs the necessary plugin for Drizzle Studio integration with Expo projects. No specific inputs or outputs, it's a standard package installation. ```shell npm i expo-drizzle-studio-plugin ``` -------------------------------- ### Start Expo App Source: https://github.com/drizzle-team/drizzle-studio-expo/blob/main/README.md Launches the Expo application. This command is used to run the Expo app on a physical device, simulator, or emulator. Web is not supported. ```shell npx expo start ``` -------------------------------- ### Setup Drizzle Studio DevTools Plugin Client in React Native Source: https://context7.com/drizzle-team/drizzle-studio-expo/llms.txt Configures the DevTools plugin client for bidirectional communication between an Expo app and the Drizzle Studio web interface. Uses `useDevToolsPluginClient` and `useEffect` to manage the connection and message listeners for queries and transactions. Requires `expo/devtools` and `expo-sqlite`. ```typescript import { useDevToolsPluginClient } from 'expo/devtools'; import { useEffect } from 'react'; import * as SQLite from 'expo-sqlite'; function DrizzleStudioProvider({ children }: { children: React.ReactNode }) { // Connect to the expo-drizzle-studio-plugin const client = useDevToolsPluginClient('expo-drizzle-studio-plugin'); const db = SQLite.openDatabaseSync('production.db'); useEffect(() => { if (!client || !db) { return; } // Set up message listeners const subscriptions = []; // Listen for query requests const queryHandler = client.addMessageListener('query', async (event) => { console.log('Received query:', event.sql); // Query execution logic here }); // Listen for transaction requests const txnHandler = client.addMessageListener('transaction', async (event) => { console.log('Received transaction with', event.queries.length, 'queries'); // Transaction execution logic here }); subscriptions.push(queryHandler, txnHandler); // Cleanup on unmount return () => { for (const subscription of subscriptions) { subscription.remove(); } console.log('Drizzle Studio disconnected'); }; }, [client, db]); return children; } // Usage: Wrap your app with the provider or use the hook directly ``` -------------------------------- ### Internal Query Execution Handler Source: https://context7.com/drizzle-team/drizzle-studio-expo/llms.txt Illustrates the internal mechanism for handling SQL queries sent from Drizzle Studio, including query preparation, execution, and response formatting. ```APIDOC ## Internal Query Execution Handler ### Description This section details the internal function responsible for processing SQL queries received from Drizzle Studio. It handles query execution against the SQLite database and sends results back to the Drizzle Studio client. ### Method `executeQuery(db: SQLite.SQLiteDatabase, client: DevToolsPluginClient, queryRequest: QueryRequest)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **sql** (string) - Required - The SQL query to execute. - **params** (array) - Optional - An array of bind values for the SQL query. - **arrayMode** (boolean) - Required - If true, results are returned in array mode. - **id** (string) - Required - A unique identifier for the query request. ### Request Example ```json { "sql": "SELECT * FROM users WHERE id = ?", "params": [1], "arrayMode": false, "id": "abc123" } ``` ### Response #### Success Response (200) - **data** (any) - The result set of the executed query. #### Error Response - **error** (string) - The error message if the query execution fails. #### Response Example ```json { "id": "abc123", "data": [ { "id": 1, "name": "John Doe", "email": "john@example.com" } ] } ``` Or for an error: ```json { "id": "abc123", "error": "Syntax error" } ``` ``` -------------------------------- ### useDrizzleStudio Hook Usage Source: https://context7.com/drizzle-team/drizzle-studio-expo/llms.txt Demonstrates how to use the `useDrizzleStudio` hook to connect an Expo SQLite database instance to the Drizzle Studio DevTools plugin. ```APIDOC ## Connecting Expo SQLite to Drizzle Studio ### Description This example shows how to integrate the `useDrizzleStudio` hook into your React Native component to enable Drizzle Studio interaction with your Expo SQLite database. ### Method `useDrizzleStudio(db: SQLite.SQLiteDatabase)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```typescript import { useDrizzleStudio } from "expo-drizzle-studio-plugin"; import * as SQLite from "expo-sqlite"; const db = SQLite.openDatabaseSync("myapp.db"); // Connect database to Drizzle Studio useDrizzleStudio(db); ``` ### Response #### Success Response (200) This hook does not return a value but establishes a connection. #### Response Example N/A ``` -------------------------------- ### Connect Expo SQLite Database to Drizzle Studio (TypeScript) Source: https://context7.com/drizzle-team/drizzle-studio-expo/llms.txt The `useDrizzleStudio` hook connects an Expo SQLite database instance to the Drizzle Studio DevTools plugin. This enables real-time database browsing and query execution from the web interface. It requires `expo-drizzle-studio-plugin` and `expo-sqlite`. The hook takes the database object as an argument and should be called within a React component. ```typescript import { useDrizzleStudio } from "expo-drizzle-studio-plugin"; import * as SQLite from "expo-sqlite"; import { View, Text } from "react-native"; import { useEffect, useState } from "react"; const db = SQLite.openDatabaseSync("myapp.db"); export default function App() { const [users, setUsers] = useState([]); // Connect database to Drizzle Studio useDrizzleStudio(db); useEffect(() => { // Initialize database with sample data db.execSync (` CREATE TABLE IF NOT EXISTS users ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT UNIQUE NOT NULL ); `); db.execSync ( ` INSERT OR IGNORE INTO users (id, name, email) VALUES (1, 'John Doe', 'john@example.com'), (2, 'Jane Smith', 'jane@example.com'); ` ); // Fetch users const result = db.getAllSync('SELECT * FROM users'); setUsers(result); }, []); return ( Users: {users.length} {users.map((user: any) => ( {user.name} - {user.email} ))} ); } ``` -------------------------------- ### Set Up Drizzle Studio Plugin with Expo SQLite Source: https://github.com/drizzle-team/drizzle-studio-expo/blob/main/README.md Configures the Drizzle Studio plugin within an Expo application using Expo SQLite. It requires an opened SQLite database connection and integrates it with the Drizzle Studio hook. Does not support web. ```jsx import { useDrizzleStudio } from "expo-drizzle-studio-plugin"; import * as SQLite from "expo-sqlite"; import { View } from "react-native"; const db = SQLite.openDatabaseSync("db"); export default function App() { useDrizzleStudio(db); return ; } ``` -------------------------------- ### Handle SQL Queries from Drizzle Studio (TypeScript) Source: https://context7.com/drizzle-team/drizzle-studio-expo/llms.txt This internal handler processes SQL queries sent from Drizzle Studio. It supports both standard and array modes for results and includes error handling. The function requires an `SQLite.SQLiteDatabase` object, a `DevToolsPluginClient` instance, and a `queryRequest` object containing the SQL, parameters, array mode flag, and a unique ID. Results or errors are sent back to the client using `sendMessage`. ```typescript import * as SQLite from 'expo-sqlite'; import { DevToolsPluginClient } from 'expo/devtools'; // Example of how queries are processed internally async function executeQuery( db: SQLite.SQLiteDatabase, client: DevToolsPluginClient, queryRequest: { sql: string; params?: SQLite.SQLiteBindValue[]; arrayMode: boolean; id: string; } ) { try { // Prepare the SQL statement const statement = await db.prepareAsync(queryRequest.sql); let executed: SQLite.SQLiteExecuteAsyncResult; // Execute with array mode or standard mode if (queryRequest.arrayMode) { executed = await statement.executeForRawResultAsync( queryRequest.params || [] ); } else { executed = await statement.executeAsync( queryRequest.params || [] ); } // Get all results const data = await executed.getAllAsync(); // Send results back to Drizzle Studio client.sendMessage(`query-${queryRequest.id}`, data); } catch (error) { // Handle and report errors client.sendMessage(`query-${queryRequest.id}`, { error: error instanceof Error ? error.message : String(error) }); } } // Example query request from Drizzle Studio: // { // sql: "SELECT * FROM users WHERE id = ?", // params: [1], // arrayMode: false, // id: "abc123" // } ``` -------------------------------- ### Implement Production Mode No-Op for Drizzle Studio Source: https://context7.com/drizzle-team/drizzle-studio-expo/llms.txt Provides a no-operation version of `useDrizzleStudio` for production builds to prevent development tools from running in release versions. It conditionally imports the full functionality in development and assigns an empty function in production using environment variables. ```typescript // src/index.ts export let useDrizzleStudio: typeof import('./useDrizzleStudio').useDrizzleStudio; // Conditional loading based on environment // @ts-ignore process.env.NODE_ENV is defined by metro transform plugins if (process.env.NODE_ENV !== 'production') { // Development: Full functionality useDrizzleStudio = require('./useDrizzleStudio').useDrizzleStudio; } else { // Production: No-op to avoid overhead useDrizzleStudio = () => {}; } // Example usage in your app: import { useDrizzleStudio } from 'expo-drizzle-studio-plugin'; import * as SQLite from 'expo-sqlite'; const db = SQLite.openDatabaseSync('app.db'); export default function App() { // This does nothing in production builds // Full Drizzle Studio integration in development useDrizzleStudio(db); // Your app code continues normally return ; } // Build for production: // npx expo build:android --release // npx expo build:ios --release // The plugin automatically becomes inactive ``` -------------------------------- ### Execute Atomic SQLite Transactions in TypeScript Source: https://context7.com/drizzle-team/drizzle-studio-expo/llms.txt Handles multiple SQL queries as an atomic transaction using expo-sqlite. Ensures all queries succeed or fail together. Takes a database connection, a DevToolsPluginClient, and a transaction request object. Returns results or errors via the client. ```typescript import * as SQLite from 'expo-sqlite'; import { DevToolsPluginClient } from 'expo/devtools'; async function executeTransaction( db: SQLite.SQLiteDatabase, client: DevToolsPluginClient, transactionRequest: { queries: { sql: string; params?: SQLite.SQLiteBindValue[] }[]; id: string; } ) { const results: any[] = []; try { await db.withTransactionAsync(async () => { // Execute each query in the transaction for (const query of transactionRequest.queries) { const stmt = await db.prepareAsync(query.sql); const executed = await stmt.executeAsync(query.params || []); const result = await executed.getAllAsync(); results.push(result); } }); // All queries succeeded, send results client.sendMessage(`transaction-${transactionRequest.id}`, results); } catch (error) { // Transaction failed, send error results.push({ error: error instanceof Error ? error.message : String(error) }); client.sendMessage(`transaction-${transactionRequest.id}`, results); } } // Example transaction request from Drizzle Studio: // { // queries: [ // { sql: "UPDATE users SET name = ? WHERE id = ?", params: ["John Updated", 1] }, // { sql: "INSERT INTO audit_log (action, user_id) VALUES (?, ?)", params: ["update", 1] } // ], // id: "txn456" // } // If any query fails, all changes are rolled back automatically ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.