v1.0
75%
Benchmarks
Extension
Studio
Studio Package
Drizzle Run
Our goodies!
EdgeDB
Upstash
Turso
🚀 Drizzle is giving you 10% off Turso Scaler and Pro for 1 Year 🚀
Payload
Xata
Neon
Nuxt
Hydra
Deco.cx
Tembo
SQLite Cloud
SingleStore
PrAha
Lokalise
Replit
Mooncake
Meet Drizzle
Get started

使用 Drizzle 和 OP-SQLite 开始

This guide assumes familiarity with:

第一步 - 从 Expo 模板设置项目

npm
yarn
pnpm
bun 
npx create expo-app --template blank-typescript

您可以在 这里 阅读更多关于此模板的信息。

基本文件结构

安装模板并添加 db 文件夹后，您将找到以下内容：在 db/schema.ts 文件中的 drizzle 表定义。 drizzle 文件夹包含 SQL 迁移文件和快照

📦 <项目根目录>
 ├ 📂 assets
 ├ 📂 drizzle
 ├ 📂 db
 │  └ 📜 schema.ts
 ├ 📜 .gitignore
 ├ 📜 .npmrc
 ├ 📜 app.json
 ├ 📜 App.tsx
 ├ 📜 babel.config.ts
 ├ 📜 drizzle.config.ts
 ├ 📜 package.json
 └ 📜 tsconfig.json

第二步 - 安装所需包

npm
yarn
pnpm
bun 
npm i drizzle-orm @op-engineering/op-sqlite
npm i -D drizzle-kit

第三步 - 将 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);

第四步 - 创建一个表

在 db 目录中创建一个 schema.ts 文件并声明您的表：

src/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(),
});

第五步 - 设置 Drizzle 配置文件

Drizzle 配置 - 这是一个配置文件，用于 Drizzle Kit，包含有关您的数据库连接、迁移文件夹和架构文件的所有信息。

在项目的根目录创建一个 drizzle.config.ts 文件并添加以下内容：

import { defineConfig } from 'drizzle-kit';

export default defineConfig({
  dialect: 'sqlite',
  driver: 'expo',
  schema: './db/schema.ts',
  out: './drizzle',
});

第六步 - 设置 metro 配置

在根目录创建一个 metro.config.js 文件并添加此代码：

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;

第七步 - 更新 babel 配置

metro.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [["inline-import", { "extensions": [".sql"] }]] // <-- 添加这一行
  };
};

第八步 - 将更改应用到数据库

在 Expo 中，您需要使用 drizzle-kit generate 命令生成迁移，并使用 drizzle-orm 的 migrate() 函数在运行时应用它们。

生成迁移：

npx drizzle-kit generate

第九步 - 应用迁移并查询您的数据库：

让我们在 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: 'john@example.com',
        },
      ]);

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

第十步 - 预构建并运行 Expo 应用

npm
yarn
pnpm
bun
npx expo run:ios