React Query 및 데이터베이스를 사용하여 데이터 가져오기 및 내보내기

React 쿼리 및 데이터베이스를 사용하여 데이터 가져오기 및 내보내기

최신 웹 애플리케이션에서 데이터 가져오기 및 내보내기는 매우 일반적인 작업입니다. 데이터 가져오기 및 내보내기 작업을 위한 데이터베이스와 결합된 데이터 관리 라이브러리로 React Query를 사용하면 이러한 작업을 보다 효율적으로 처리하는 데 도움이 될 수 있습니다. 이 글에서는 React Query와 샘플 데이터베이스를 사용하여 데이터 가져오기 및 내보내기 작업을 완료하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 준비

먼저 React Query를 설치하고 설정해야 합니다. 다음 명령을 사용하여 새 React 프로젝트를 초기화하고 React Query를 설치할 수 있습니다.

npx create-react-app my-app
cd my-app
npm install react-query

다음으로 데이터를 저장할 샘플 데이터베이스를 준비해야 합니다. 여기서는 SQLite 데이터베이스를 예로 사용합니다. 다음 명령을 사용하여 SQLite3을 설치할 수 있습니다.

npm install sqlite3

프로젝트의 루트 디렉터리에 database.sqlite 파일을 데이터베이스 파일로 생성합니다. database.sqlite 文件，作为我们的数据库文件。

接下来，我们需要创建一个用于管理数据导入和导出的 React 组件。可以在 src 目录下创建一个名为 DataExportImport.js 的文件，并在其中编写以下代码：

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

const DataExportImport = () => {
  const queryClient = useQueryClient();

  const handleExportData = async () => {
    const data = await fetch('/api/export');
    const jsonData = await data.json();
    // 处理导出的数据...
  };

  const handleImportData = async () => {
    const response = await fetch('/api/import');
    const json = await response.json();
    // 处理导入的数据...
    queryClient.invalidateQueries('data'); // 更新数据
  };

  return (
    <div>
      <button onClick={handleExportData}>导出数据</button>
      <button onClick={handleImportData}>导入数据</button>
    </div>
  );
};

export default DataExportImport;

在上述代码中，我们使用 useQueryClient 钩子函数从 React Query 中获取了一个用于管理查询的实例。然后，我们定义了两个处理函数 handleExportData 和 handleImportData，分别用于处理数据导出和导入的操作。

handleExportData 函数通过发送一个 GET 请求到 /api/export 接口，获取导出的数据。在实际项目中，这个接口需要根据实际情况进行配置，可以使用后端技术栈如 Express.js 或者 Nest.js 来实现。

handleImportData 函数通过发送一个 GET 请求到 /api/import 接口，导入数据到数据库。同样，这个接口需要根据实际情况进行配置。

在处理完数据导入和导出的操作后，我们通过调用 queryClient.invalidateQueries('data') 来通知 React Query 更新与数据相关的查询。

二、在应用中使用 DataExportImport 组件

在我们的应用中加入 DataExportImport 组件，可以通过编辑 src/App.js 文件来实现。例如，我们可以在应用的顶层组件上方加入导入文件的按钮：

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div>
        <DataExportImport />
        {/* 其他组件... */}
      </div>
    </QueryClientProvider>
  );
}

export default App;

在上述代码中，我们首先引入了 QueryClient 和 QueryClientProvider 组件，并创建了一个 queryClient 实例。然后，在应用的顶层组件中使用 QueryClientProvider 将 queryClient 实例提供给应用中所有的组件。

将 DataExportImport 组件放置在应用的顶层组件中，并根据实际需求调整其位置。

三、调用导入导出操作

最后，我们需要实现 /api/export 和 /api/import 接口来处理数据的导入和导出。在本示例中，我们使用 Express.js 来实现这些接口。

在项目的根目录，创建一个 server.js 文件，并编写以下代码：

const express = require('express');
const sqlite3 = require('sqlite3').verbose();

const app = express();
const port = 5000;
const db = new sqlite3.Database('./database.sqlite');

app.get('/api/export', (req, res) => {
  db.serialize(() => {
    db.all('SELECT * FROM your_table', (err, rows) => {
      if (err) {
        console.error(err.message);
        res.status(500).send(err.message);
      } else {
        res.json(rows);
      }
    });
  });
});

app.get('/api/import', (req, res) => {
  // 处理导入数据的逻辑...
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

在上述代码中，我们通过调用 Express.js 的 app.get 方法来创建了两个 GET 请求的接口 /api/export 和 /api/import。这里的逻辑可以根据实际需求来编写，例如，我们可以使用 SQLite 的 db.all 方法从数据库中查询数据，并通过调用 res.json

다음으로 데이터 가져오기 및 내보내기를 관리하는 React 구성 요소를 만들어야 합니다. src 디렉터리에 DataExportImport.js라는 파일을 만들고 그 안에 다음 코드를 작성할 수 있습니다.

node server.js

위 코드에서는 useQueryClient 후크 기능은 쿼리를 관리하는 데 사용되는 React Query에서 인스턴스를 가져옵니다. 그런 다음 데이터 내보내기 및 가져오기 작업을 각각 처리하는 데 사용되는 두 가지 처리 함수 <code>handleExportData 및 handleImportData를 정의했습니다.

handleExportData 함수는 /api/export 인터페이스에 GET 요청을 보내 내보낸 데이터를 가져옵니다. 실제 프로젝트에서는 이 인터페이스를 실제 상황에 맞게 구성해야 하며 Express.js 또는 Nest.js와 같은 백엔드 기술 스택을 사용하여 구현할 수 있습니다.

handleImportData 함수는 /api/import 인터페이스에 GET 요청을 보내 데이터를 데이터베이스로 가져옵니다. 다시 말하지만, 이 인터페이스는 실제 상황에 따라 구성되어야 합니다. 🎜🎜데이터 가져오기 및 내보내기 작업을 처리한 후 queryClient.invalidateQueries('data')를 호출하여 React Query에 데이터 관련 쿼리를 업데이트하도록 알립니다. 🎜🎜2. 애플리케이션에서 DataExportImport 구성 요소를 사용하세요🎜🎜 src/App.js 파일을 편집하여 DataExportImport 구성 요소를 애플리케이션에 추가하세요. 예를 들어, 애플리케이션의 최상위 구성 요소 위에 파일을 가져오는 버튼을 추가할 수 있습니다. 🎜rrreee🎜위 코드에서는 QueryClient 및 QueryClientProvider를 먼저 소개했습니다. 구성요소를 생성하고 queryClient의 인스턴스를 생성했습니다. 그런 다음 애플리케이션의 최상위 구성 요소에서 QueryClientProvider를 사용하여 애플리케이션의 모든 구성 요소에 queryClient 인스턴스를 제공합니다. 🎜🎜 DataExportImport 구성 요소를 애플리케이션의 최상위 구성 요소에 배치하고 실제 필요에 따라 위치를 조정합니다. 🎜🎜3 가져오기 및 내보내기 작업 호출🎜🎜마지막으로 가져오기 및 내보내기를 처리하려면 /api/export 및 /api/import 인터페이스를 구현해야 합니다. 데이터. 이 예에서는 Express.js를 사용하여 이러한 인터페이스를 구현합니다. 🎜🎜프로젝트 루트 디렉터리에 server.js 파일을 생성하고 다음 코드를 작성합니다. 🎜rrreee🎜위 코드에서는 Express.js의 app.get을 호출합니다. code> 메소드를 사용하여 두 개의 GET 요청 인터페이스 <code>/api/export 및 /api/import를 생성합니다. 여기의 논리는 실제 필요에 따라 작성될 수 있습니다. 예를 들어 SQLite의 db.all 메서드를 사용하여 데이터베이스에서 데이터를 쿼리하고 res.json 메서드를 호출할 수 있습니다. 데이터를 JSON 형식으로 프런트 엔드에 반환합니다. 🎜🎜실제 상황에 따라 구성하고 해당 종속성을 설치하세요. 다음 명령을 사용하여 Express.js 서버를 시작할 수 있습니다. 🎜rrreee🎜이제 React Query와 데이터베이스를 사용하여 데이터 가져오기 및 내보내기를 완료했습니다. 페이지의 버튼을 클릭하면 해당 작업을 트리거하고 React Query를 사용하여 데이터 쿼리를 관리할 수 있습니다. 🎜🎜이 글은 실제 상황에 따라 확장하고 최적화할 수 있는 간단한 예를 제공합니다. 이 글이 React Query와 데이터베이스를 사용하여 데이터를 가져오고 내보내는 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 React Query 및 데이터베이스를 사용하여 데이터 가져오기 및 내보내기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!