Nhost与React Native快速入门：构建待办事项应用-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00889/article/details/148440141

Nhost与React Native快速入门：构建待办事项应用

nhost nhost/nhost: 是一个用于构建基于 Nuxt.js 的后端应用程序的框架，可以方便地实现 Nuxt.js 后端应用程序的开发。适合对 Nuxt.js、后端应用程序和想要实现 Nuxt.js 后端应用程序的开发者。项目地址: https://gitcode.com/gh_mirrors/nh/nhost

前言

Nhost是一个基于Hasura和PostgreSQL的后端即服务(BaaS)平台，为开发者提供了开箱即用的身份验证、数据库和存储功能。本文将详细介绍如何使用Nhost和React Native快速构建一个具有完整CRUD功能的待办事项应用。

环境准备

在开始之前，请确保你的开发环境已配置好React Native开发所需工具：

Node.js (建议使用LTS版本)
React Native CLI
Android Studio或Xcode (根据目标平台选择)
模拟器或真机设备

项目创建与配置

1. 创建Nhost项目

首先需要在Nhost平台上创建一个新项目。创建完成后，系统会为你分配一个子域名和区域信息，这些将在后续步骤中用于连接React Native应用。

2. 数据库设置

在Nhost的SQL编辑器中执行以下SQL语句创建待办事项表：

CREATE TABLE todos (
  id uuid NOT NULL DEFAULT gen_random_uuid(),
  created_at timestamptz NOT NULL DEFAULT now(),
  updated_at timestamptz NOT NULL DEFAULT now(),
  user_id uuid NOT NULL,
  contents text NOT NULL,
  PRIMARY KEY (id),
  FOREIGN KEY (user_id) REFERENCES auth.users(id) ON UPDATE cascade ON DELETE cascade
);

重要提示：务必勾选"Track this"选项，这样Hasura会自动为表生成GraphQL API。

3. 设置表权限

为了确保数据安全，我们需要为todos表配置适当的权限规则：

插入权限

行级权限：无检查
列级权限：选择除user_id外的所有列
列预设：将user_id设置为X-Hasura-User-Id

查询权限

行级权限：自定义检查规则，限制用户只能查询自己的待办事项
列级权限：选择除user_id外的所有列

更新权限

行级权限：自定义检查规则，限制用户只能更新自己的待办事项
列级权限：选择除user_id外的所有列

删除权限

行级权限：自定义检查规则，限制用户只能删除自己的待办事项

React Native应用开发

1. 初始化项目

使用Nhost提供的React Native模板初始化项目：

npx react-native init myapp --template @nhost/react-native-template

这个模板已经预配置了Nhost的身份验证和存储功能，可以节省大量配置时间。

2. 连接Nhost后端

在src/root.tsx文件中配置Nhost客户端：

const nhost = new NhostClient({
  subdomain: "<你的子域名>",
  region: "<你的区域>",
  clientStorageType: 'react-native',
  clientStorage: AsyncStorage,
});

3. 定义GraphQL查询

创建src/graphql/todos.ts文件，定义待办事项的查询和变更操作：

import {gql} from '@apollo/client';

export const GET_TODOS = gql`
  query listTodos {
    todos(order_by: { created_at: desc }) {
      id
      contents
    }
  }
`;

export const ADD_TODO = gql`
  mutation addTodo($contents: String!) {
    insert_todos_one(object: { contents: $contents }) {
      id
      contents
    }
  }
`;

export const DELETE_TODO = gql`
  mutation deleteTodo($id: uuid!) {
    delete_todos_by_pk(id: $id) {
      __typename
    }
  }
`;

4. 构建UI组件

添加待办事项表单

创建AddTodoForm组件，使用React Hook Form处理表单提交：

const AddTodoForm = () => {
  const {control, handleSubmit, reset} = useForm<AddTodoFormValues>();
  const [addTodo] = useMutation(ADD_TODO, {
    refetchQueries: [{query: GET_TODOS}],
  });

  const onSubmit = async (values: AddTodoFormValues) => {
    await addTodo({variables: {contents: values.contents}});
    reset();
  };

  return (
    <View style={styles.wrapper}>
      <ControlledInput
        control={control}
        name="contents"
        placeholder="新待办事项"
      />
      <Button label="添加" onPress={handleSubmit(onSubmit)} />
    </View>
  );
};

待办事项列表

创建Todo组件显示单个待办事项，并实现删除功能：

const Todo = ({todo}: {todo: TodoItem}) => {
  const [deleteTodo] = useMutation(DELETE_TODO, {
    variables: {id: todo.id},
    refetchQueries: [{query: GET_TODOS}],
  });

  return (
    <View style={styles.wrapper}>
      <Text>{todo.contents}</Text>
      <Button 
        icon="trash-can-outline" 
        onPress={() => deleteTodo()}
      />
    </View>
  );
};

待办事项页面

创建Todos页面，组合表单和列表组件：

const Todos = () => {
  const {loading, data} = useQuery<{todos: TodoItem[]}>(GET_TODOS);

  if (loading) return <ActivityIndicator />;

  return (
    <View style={styles.wrapper}>
      <AddTodoForm />
      <FlatList
        data={data?.todos || []}
        renderItem={({item}) => <Todo todo={item} />}
        keyExtractor={item => item.id}
      />
    </View>
  );
};

5. 集成到导航系统

将待办事项页面添加到应用的抽屉导航中：

function DrawerNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Profile" component={Profile} />
      <Drawer.Screen name="Todos" component={Todos} />
      <Drawer.Screen name="Storage" component={Storage} />
    </Drawer.Navigator>
  );
}