DOCSEARCHbyAlgolia
Submit Docs

Drizzle Studio for Expo

repository·main·Indexed 41 days ago

https://github.com/drizzle-team/drizzle-studio-expo

An Expo DevTools plugin (expo-drizzle-studio-plugin v0.2.1) that allows developers to browse and manage Expo SQLite data using the Drizzle Studio interface. It provides the useDrizzleStudio hook to connect an active expo-sqlite database instance to the studio interface during development.

Tokens
1.3K
Snippets
7
Records
7
Agent score
53%

What's inside Drizzle Studio

  1. Set up the Drizzle Studio plugin in your App

    main

    To enable the plugin, import useDrizzleStudio from expo-drizzle-studio-plugin and call it within your root component, passing your initialized SQLite database instance as an argument. This allows Drizzle Studio to connect to your local database during development.

    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 <View></View>;
}

  3. Access Drizzle Studio via Expo Dev Tools

    main

    Drizzle Studio is accessed through the Expo Dev Tools menu. Note that this plugin only works on physical devices, simulators, or emulators; Web is not supported.

    1. Start your Expo app:
      npx expo start
    2. In the terminal where the Expo process is running, press `shift + m` to open the Dev Tools menu.
3. Select `expo-drizzle-studio-plugin` from the list.
4. Drizzle Studio will open in a new web browser tab.

  4. Configure Metro for the Web UI

    main

    The Web UI component of Drizzle Studio Expo requires a specific Metro configuration to handle module resolution correctly. Specifically, it disables unstable_enablePackageExports to avoid ESM babel/runtime resolution issues and ensures .js extensions are included in the resolver's source extensions.

    const { getDefaultConfig } = require("expo/metro-config");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

config.resolver.sourceExts.push("js");
config.resolver.unstable_enablePackageExports = false; // Workaround for ESM babel/runtime resolving issue

module.exports = config;

  5. Configure the Expo DevTools platform for Drizzle Studio

    main

    The expo-module.config.json defines the integration of Drizzle Studio into the Expo development environment. It specifies that the module is available on the devtools platform and defines the webpageRoot as dist, which tells the Expo devtools environment where to find the web assets for the studio interface.

    {
  "platforms": ["devtools"],
  "devtools": {
    "webpageRoot": "dist"
  }
}

  6. Connect an Expo SQLite database using useDrizzleStudio

    main

    The useDrizzleStudio hook enables Drizzle Studio to interact with your Expo SQLite database instance via the Expo DevTools plugin system. It listens for query and transaction messages from the expo-drizzle-studio-plugin and executes them against the provided SQLiteDatabase instance.

    To use it, pass your active expo-sqlite database instance to the hook within a React component. The hook handles setting up message listeners and cleaning up subscriptions when the component unmounts.

    import * as SQLite from 'expo-sqlite';
import { useDrizzleStudio } from './path-to-your-hook';

export function MyComponent() {
  const [db, setDb] = useState<SQLite.SQLiteDatabase | null>(null);

  useEffect(() => {
    async function setup() {
      const database = await SQLite.openDatabaseAsync('myDatabase.db');
      setDb(database);
    }
    setup();
  }, []);

  // Connect the database to Drizzle Studio
  useDrizzleStudio(db);

  return null;
}

  7. Use the useDrizzleStudio hook

    main

    The useDrizzleStudio hook is the primary entrypoint for integrating Drizzle Studio into an Expo application.

    Development Behavior: In non-production environments, the hook is active and enables the Drizzle Studio interface.

    Production Behavior: In production environments (process.env.NODE_ENV === 'production'), the hook is a no-op function (() => {}) and does nothing, ensuring that the studio interface is not exposed to end-users in production builds.

    import { useDrizzleStudio } from 'expo-drizzle-studio-plugin';

// Inside your Expo component
useDrizzleStudio();