使用 Convex

编辑页面

使用 Convex 为你的应用添加数据库。

Convex 是一个基于 TypeScript 的数据库，无需集群管理、SQL 或 ORM。Convex 通过 WebSocket 提供实时更新，非常适合响应式应用。

安装 Convex

在你创建好 Expo 项目后，使用以下命令安装 convex：

Terminal

- npx expo install convex

设置 Convex 开发部署

运行以下命令来设置你的 Convex 项目：

Terminal

- npx convex dev

此命令会：

创建一个 Convex 账户，或允许你登录。
在 Convex 上创建一个项目。
保存你的生产环境和部署 URL。

它还会创建一个 convex/ 文件夹，你可以在其中编写由 Convex 托管的后端 API 函数。

请让此命令在一个终端窗口中持续运行，这样它就能将你的函数同步到 Convex 云中的开发部署。

将 Convex URL 保存为 EAS 环境变量

运行 npx convex dev 会将你的部署 URL 保存到 .env.local 文件中，名称为 EXPO_PUBLIC_CONVEX_URL。为了让它在你的应用构建中可用，请在新的终端会话中将其添加为 EAS 环境变量：

Terminal

-

eas env:create --name EXPO_PUBLIC_CONVEX_URL --value https://YOUR_DEPLOYMENT_URL.convex.cloud --visibility plaintext --environment production --environment preview --environment development

将 https://YOUR_DEPLOYMENT_URL.convex.cloud 替换为你 .env.local 文件中的 EXPO_PUBLIC_CONVEX_URL 值。了解更多，请参阅环境变量。

为数据库初始化种子数据

接下来，创建一个包含以下示例数据的 sampleData.jsonl 文件：

sampleData.jsonl

{"text": "Buy groceries", "isCompleted": true}
{"text": "Go for a swim", "isCompleted": true}
{"text": "Integrate Convex", "isCompleted": false}

要将这些数据发送到 Convex，请运行：

Terminal

- npx convex import --table tasks sampleData.jsonl

查询数据库

Convex 中的所有查询都是 TypeScript 代码。创建一个包含以下内容的 convex/tasks.ts 文件：

convex/tasks.ts

import { query } from './_generated/server';

export const get = query({
  args: {},
  handler: async ctx => {
    return await ctx.db.query('tasks').collect();
  },
});

连接你的应用

在应用顶层的 src/app/_layout.tsx 文件中，创建一个 ConvexReactClient，并将其传递给包裹组件树的 ConvexProvider：

src/app/_layout.tsx

import { ConvexProvider, ConvexReactClient } from 'convex/react';
import { Stack } from 'expo-router';

const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!, {
  unsavedChangesWarning: false,
});

export default function RootLayout() {
  return (
    <ConvexProvider client={convex}>
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
    </ConvexProvider>
  );
}

在应用中显示数据

在你的应用中，使用 useQuery 钩子从 api.tasks.get API 获取数据：

src/app/index.tsx

import { api } from '@/convex/_generated/api';
import { useQuery } from 'convex/react';
import { Text, View } from 'react-native';

export default function Index() {
  const tasks = useQuery(api.tasks.get);

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      {tasks?.map(({ _id, text }) => (
        <Text key={_id}>{text}</Text>
      ))}
    </View>
  );
}

下一步

了解如何使用 Convex

在构建聊天应用的同时了解 Convex 的工作原理。