Drizzle <> Expo SQLite

**공식 웹사이트**에 따르면, Expo는 React Native에서 애플리케이션을 개발, 빌드 및 배포하기 위한 도구 생태계입니다. Hermes JavaScript 런타임과 Metro 번들러로 구동되며, Drizzle Expo 드라이버는 두 가지를 기본적으로 지원하도록 구축되었습니다.

Drizzle ORM은 Expo SQLite를 위한 최고의 툴킷을 제공합니다:

Expo SQLite용 네이티브 ORM 드라이버 ✅
애플리케이션에서 마이그레이션 생성 및 번들링을 지원하는 Drizzle Kit ✅
기기 내 데이터베이스를 탐색할 수 있는 Drizzle Studio 개발 도구 플러그인 ✅
Live Queries ✅

npm

yarn

pnpm

bun

npm i drizzle-orm expo-sqlite@next
npm i -D drizzle-kit

yarn add drizzle-orm expo-sqlite@next
yarn add -D drizzle-kit

pnpm add drizzle-orm expo-sqlite@next
pnpm add -D drizzle-kit

bun add drizzle-orm expo-sqlite@next
bun add -D drizzle-kit

import { drizzle } from "drizzle-orm/expo-sqlite";
import { openDatabaseSync } from "expo-sqlite";

const expo = openDatabaseSync("db.db");
const db = drizzle(expo);

await db.select().from(users);

Live Queries

useLiveQuery 훅을 사용하면 모든 Drizzle 쿼리를 반응형으로 만들 수 있습니다:

import { useLiveQuery, drizzle } from 'drizzle-orm/expo-sqlite';
import { openDatabaseSync } from 'expo-sqlite';
import { Text } from 'react-native';
import * as schema from './schema';

const expo = openDatabaseSync('db.db', { enableChangeListener: true }); // <-- 변경 리스너 활성화
const db = drizzle(expo);

const App = () => {
  // 데이터가 변경되면 자동으로 다시 렌더링됩니다
  const { data } = useLiveQuery(db.select().from(schema.users));
  return <Text>{JSON.stringify(data)}</Text>;
};

export default App;

Drizzle Kit를 사용한 Expo SQLite 마이그레이션

Drizzle Kit를 SQL 마이그레이션 생성에 사용할 수 있습니다. 진행하기 전에 Drizzle 마이그레이션이 어떻게 작동하는지 확인하세요. Expo / React Native는 SQL 마이그레이션을 앱에 번들로 포함해야 하며, 저희가 이를 지원합니다.

babel 플러그인 설치

SQL 마이그레이션 파일을 문자열로 직접 번들에 포함하려면 필요합니다.

npm install babel-plugin-inline-import

설정 파일 업데이트

babel.config.js, metro.config.js 및 drizzle.config.ts 파일을 업데이트해야 합니다

module.exports = function(api) {
  api.cache(true);

  return {
    presets: ['babel-preset-expo'],
    plugins: [["inline-import", { "extensions": [".sql"] }]] // <-- 이 부분을 추가하세요
  };
};

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

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

config.resolver.sourceExts.push('sql'); // <--- 이 부분을 추가하세요

module.exports = config;

Drizzle Kit 설정에 dialect: 'sqlite' 및 driver: 'expo'가 있는지 확인하세요

import { defineConfig } from 'drizzle-kit';

export default defineConfig({
	schema: './db/schema.ts',
	out: './drizzle',
  dialect: 'sqlite',
	driver: 'expo', // <--- 매우 중요합니다
});

마이그레이션 생성

SQL 스키마 파일과 drizzle.config.ts 파일을 생성한 후 마이그레이션을 생성할 수 있습니다

npx drizzle-kit generate

앱에 마이그레이션 추가

이제 ./drizzle 폴더에서 migrations.js 파일을 Expo/React Native 앱으로 가져와야 합니다. 애플리케이션 시작 시 커스텀 useMigrations 마이그레이션 훅을 사용하거나 원하는 대로 useEffect 훅에서 수동으로 마이그레이션을 실행할 수 있습니다.

import { drizzle } from "drizzle-orm/expo-sqlite";
import { openDatabaseSync } from "expo-sqlite";
import { useMigrations } from 'drizzle-orm/expo-sqlite/migrator';
import migrations from './drizzle/migrations';

const expoDb = openDatabaseSync("db.db");

const db = drizzle(expoDb);

export default function App() {
  const { success, error } = useMigrations(db, migrations);

  if (error) {
    return (
      <View>
        <Text>Migration error: {error.message}</Text>
      </View>
    );
  }

  if (!success) {
    return (
      <View>
        <Text>Migration is in progress...</Text>
      </View>
    );
  }

  return ...your application component;
}