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

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

npm install sqlite3

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;

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;

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

node server.js