データのクリーニングと検証に React Query とデータベースを使用する

データのクリーニングと検証に React Query とデータベースを使用する

現代の Web アプリケーション開発では、フロントエンド データの処理と管理は非常に重要なタスクです。 React Query はデータ管理に役立つ強力なライブラリであり、データベースはアプリケーション データを保存するための重要なツールです。この記事では、データのクリーニングと検証に React Query とデータベースを使用する方法を紹介し、具体的なコード例を示します。

1. 背景
ここで、ユーザーがタスクを作成してデータベースに保存できる単純なタスク管理アプリケーションがあると仮定します。タスク作成プロセス中に、データの有効性と一貫性を確保するために、ユーザーが入力したデータをクリーニングして検証する必要があります。同時に、将来のクエリや使用のためにタスク データをデータベースに保存する必要もあります。

2. データのクリーニングと検証

1. React Query のインストール
   まず、プロジェクトに React Query をインストールする必要があります。 npmまたはyarnコマンドを使用してインストールできます。

npm：

npm install react-query

yarn：

yarn add react-query

2. React クエリ プロバイダーの作成
   アプリケーションのエントリ ファイルで、React クエリを作成する必要がありますProvider を作成し、それを App コンポーネントの外層でラップします。プロバイダーは、後で使用できるように、React Query 関連の関数をアプリケーション全体に挿入します。

import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用的其他组件 */}
    </QueryClientProvider>
  );
}

export default App;

3. コンポーネントで React Query の useMutation フックを使用する
   次に、データのクリーニングと検証を実行する必要があるコンポーネントで、React Query の useMutation フックを使用してデータの送信と保存を処理します。データの。 useMutation フックは、リクエストのステータス (読み込み、成功、エラーなど) を処理するのに役立ち、リクエストの送信と結果の処理のロジックを処理する関数を提供します。

import React from 'react';
import { useMutation } from 'react-query';

function CreateTaskForm() {
  const createTaskMutation = useMutation((newTask) => {
    // 执行任务创建的逻辑
    return fetch('/api/tasks', {
      method: 'POST',
      body: JSON.stringify(newTask),
    }).then((response) => response.json());
  });

  const handleSubmit = (event) => {
    event.preventDefault();

    const form = event.target;
    const formData = new FormData(form);

    const newTask = {
      title: formData.get('title'),
      description: formData.get('description'),
      // 其他字段
    };

    createTaskMutation.mutate(newTask);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" />
      <textarea name="description" />
      {/* 其他输入框 */}
      <button type="submit">创建任务</button>
    </form>
  );
}

上の例では、モック API /api/tasks を使用してタスク作成リクエストをシミュレートし、リクエストが成功した後にタスクの詳細を返しました。

4. データベース接続と操作
   データのクリーニングと検証が完了したら、タスク データをデータベースに保存する必要があります。ここでは、MongoDB データベースを例として、Mongoose ライブラリを使用してデータベースに接続し、操作します。

まず、Mongoose をインストールする必要があります:

npm:

npm install mongoose

yarn:

yarn add mongoose

次に、db を作成します。プロジェクト .js ファイルを開き、次のコードを追加します。

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/my-database', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const TaskSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
  // 其他字段
});

const TaskModel = mongoose.model('Task', TaskSchema);

module.exports = TaskModel;

上記のコードでは、単純なタスク モデルを定義し、アプリケーション内の他の場所で使用できるようにそのモデルをエクスポートします。

5. タスク データをデータベースに保存する
   次に、React Query の useMutation フックの非同期コールバック関数で、Mongoose を使用してタスク データをデータベースに保存できます。

import React from 'react';
import { useMutation } from 'react-query';
import TaskModel from './db';

function CreateTaskForm() {
  const createTaskMutation = useMutation((newTask) => {
    // 执行任务创建的逻辑
    return TaskModel.create(newTask); // 使用 Mongoose 保存任务数据
  });

  // 其他代码

  return (
    {/* 表单代码 */}
  );
}

上の例では、TaskModel.create メソッドを使用してタスク データをデータベースに保存します。

3. 概要
React Query とデータベースを使用すると、フロントエンド データを簡単にクリーンアップして検証し、データベースに保存できます。これにより、データの有効性と一貫性が確保され、アプリケーションのユーザー エクスペリエンスとデータ品質が向上します。上記のサンプルコードは単なる例であり、実際のプロジェクトでは、特定のビジネスニーズに合わせて必要に応じて拡張および最適化できます。

以上がデータのクリーニングと検証に React Query とデータベースを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。