Drizzle 和 OP-SQLite 入门
本指南假定您熟悉
- OP-SQLite - 适用于 react-native 的 SQLite 库 - 在此阅读
步骤 1 - 从 Expo 模板设置项目
npm
yarn
pnpm
bun
npx create expo-app --template blank-typescript您可以在此处阅读更多关于此模板的信息。
基本文件结构
安装模板并添加 db 文件夹后，您会找到以下内容：db/schema.ts 文件包含 Drizzle 表定义。drizzle 文件夹包含 SQL 迁移文件和快照
📦 <project root>
├ 📂 assets
├ 📂 drizzle
├ 📂 db
│ └ 📜 schema.ts
├ 📜 .gitignore
├ 📜 .npmrc
├ 📜 app.json
├ 📜 App.tsx
├ 📜 babel.config.ts
├ 📜 drizzle.config.ts
├ 📜 package.json
└ 📜 tsconfig.json步骤 2 - 安装所需包
npm
yarn
pnpm
bun
npm i drizzle-orm @op-engineering/op-sqlite
npm i -D drizzle-kit第 3 步 - 将 Drizzle ORM 连接到数据库
在根目录下创建 App.tsx 文件并初始化连接
import { open } from '@op-engineering/op-sqlite';
import { drizzle } from 'drizzle-orm/expo-sqlite';
const opsqliteDb = open({
name: 'db',
});
const db = drizzle(opsqliteDb);第 4 步 - 创建表
在 db 目录下创建 schema.ts 文件并声明您的表
import { int, sqliteTable, text } from "drizzle-orm/sqlite-core";
export const usersTable = sqliteTable("users_table", {
id: int().primaryKey({ autoIncrement: true }),
name: text().notNull(),
age: int().notNull(),
email: text().notNull().unique(),
});第 5 步 - 设置 Drizzle 配置文件
Drizzle config - 由 Drizzle Kit 使用的配置文件，包含有关你的数据库连接、迁移文件夹和 schema 文件的所有信息。
在项目的根目录中创建 drizzle.config.ts 文件并添加以下内容
import { defineConfig } from 'drizzle-kit';
export default defineConfig({
dialect: 'sqlite',
driver: 'expo',
schema: './db/schema.ts',
out: './drizzle',
});步骤 6 - 设置 metro 配置
在根文件夹中创建 metro.config.js 文件并在其中添加此代码
const { getDefaultConfig } = require('expo/metro-config');
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
config.resolver.sourceExts.push('sql');
module.exports = config;步骤 7 - 更新 babel 配置
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [["inline-import", { "extensions": [".sql"] }]] // <-- add this
};
};步骤 8 - 将更改应用到数据库
使用 Expo，您需要使用 drizzle-kit generate 命令生成迁移，然后使用 drizzle-orm 的 migrate() 函数在运行时应用它们
生成迁移
npx drizzle-kit generate步骤 9 - 应用迁移并查询您的数据库：
让我们在 App.tsx 文件中添加迁移和查询，以创建、读取、更新和删除用户
import { Text, View } from 'react-native';
import { open } from '@op-engineering/op-sqlite';
import { useEffect, useState } from 'react';
import { drizzle } from 'drizzle-orm/op-sqlite';
import { usersTable } from './db/schema';
import { useMigrations } from 'drizzle-orm/op-sqlite/migrator';
import migrations from './drizzle/migrations';
const opsqliteDb = open({
name: 'db',
});
const db = drizzle(opsqliteDb);
export default function App() {
const { success, error } = useMigrations(db, migrations);
const [items, setItems] = useState<typeof usersTable.$inferSelect[] | null>(null);
useEffect(() => {
if (!success) return;
(async () => {
await db.delete(usersTable);
await db.insert(usersTable).values([
{
name: 'John',
age: 30,
email: '[email protected]',
},
]);
const users = await db.select().from(usersTable);
setItems(users);
})();
}, [success]);
if (error) {
return (
<View>
<Text>Migration error: {error.message}</Text>
</View>
);
}
if (!success) {
return (
<View>
<Text>Migration is in progress...</Text>
</View>
);
}
if (items === null || items.length === 0) {
return (
<View>
<Text>Empty</Text>
</View>
);
}
return (
<View
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
height: '100%',
justifyContent: 'center',
}}
>
{items.map((item) => (
<Text key={item.id}>{item.email}</Text>
))}
</View>
);
}步骤 10 - 预构建并运行 Expo 应用
npm
yarn
pnpm
bun
npx expo run:ios