Drizzle 与 OP SQLite

根据**官方 GitHub 页面**的描述,OP-SQLite 内嵌了最新版本的 SQLite,并提供低级 API 来执行 SQL 查询。

npm
yarn
pnpm
bun
npm i drizzle-orm @op-engineering/op-sqlite
npm i -D drizzle-kit
import { drizzle } from "drizzle-orm/op-sqlite";
import { open } from '@op-engineering/op-sqlite';

const opsqlite = open({
  name: 'myDB',
});
const db = drizzle(opsqlite);

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

您可以使用 Drizzle Kit 来生成 SQL 迁移。
在继续之前,请务必查看 Drizzle Kit 迁移 的工作方式。
OP SQLite 要求您将 SQL 迁移文件捆绑到应用程序中,我们已为您提供解决方案。

安装 Babel 插件

必须将 SQL 迁移文件作为字符串直接捆绑到您的包中。

npm install babel-plugin-inline-import

更新配置文件。

您需要更新 babel.config.jsmetro.config.jsdrizzle.config.ts 文件。

babel.config.js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'inline-import',
      {
        extensions: ['.sql'],
      },
    ],
  ],
};
metro.config.js
const { getDefaultConfig } = require('@react-native/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.sourceExts.push('sql');

module.exports = config;

确保在 Drizzle Kit 配置中设置 dialect: 'sqlite'driver: 'expo'

drizzle.config.ts
import type { Config } from 'drizzle-kit';

export default {
	schema: './db/schema.ts',
	out: './drizzle',
  dialect: 'sqlite',
	driver: 'expo', // <--- very important
} satisfies Config;

生成迁移

创建 SQL schema 文件和 drizzle.config.ts 文件后,您可以生成迁移。

npx drizzle-kit generate

将迁移添加到您的应用程序

现在,您需要从 ./drizzle 文件夹将 migrations.js 文件导入到您的 Expo/React Native 应用程序中。您可以根据需要,在应用程序启动时使用我们的自定义 useMigrations 迁移钩子,或者在 useEffect 钩子中手动运行迁移。

App.tsx
import { drizzle } from "drizzle-orm/op-sqlite";
import { open } from '@op-engineering/op-sqlite';
import { useMigrations } from 'drizzle-orm/op-sqlite/migrator';
import migrations from './drizzle/migrations';

const opsqliteDb = open({
  name: 'myDB',
});

const db = drizzle(opsqliteDb);

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