### 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.