Morioh
Login
CODE VN

CODE VN

6 months ago

Cách đăng dữ liệu lên máy chủ trong React

Hook useMutation của React Query là một công cụ mạnh mẽ để quản lý cập nhật dữ liệu phía máy chủ trong các ứng dụng React. Nó cung cấp một cấu trúc và cách hiệu quả để xử lý các đột biến, mang lại một số lợi thế so với các phương pháp truyền thống:

Trong hướng dẫn này, bạn sẽ  tìm hiểu cách tạo hoặc thêm dữ liệu vào máy chủ bằng cách sử dụng hook useMutation của React Query trong ứng dụng React JS. Để post dữ liệu lên server sử dụng Mutation trong React with React Query chúng ta làm theo các bước sau

Mục lục

  • Bước 1: Xây dựng dự án React
  • Bước 2: Thêm Axios & Truy vấn phản ứng
  • Bước 3: Cấu hình mô-đun Bootstrap
  • Bước 4: Thiết lập truy vấn React
  • Bước 5: Xây dựng thành phần chức năng
  • Bước 6: Tạo máy chủ JSON
  • Bước 7: Đăng dữ liệu lên máy chủ bằng useMutation
  • Bước 8: Cập nhật thành phần JS ứng dụng
  • Bước 9: Kiểm tra ứng dụng trên trình duyệt

Xem trước

Cách sử dụng Đột biến truy vấn React để tạo hoặc thêm dữ liệu vào máy chủ

Bước 1: Xây dựng dự án React

Công cụ Tạo ứng dụng React là một công cụ bắt buộc để tạo ứng dụng React mà bạn phải có cùng với Node và NPM trên hệ thống của mình. Sau khi chạy lệnh đã cho, bạn sẽ phải di chuyển vào thư mục gốc của dự án.

npx create-react-app react-blog-app
cd react-blog-app

Bước 2: Thêm Axios & Truy vấn phản ứng

Axios giúp bạn thực hiện yêu cầu tới máy chủ, trong khi Truy vấn yêu cầu cung cấp cho bạn sự hỗ trợ vô điều kiện để xử lý phản hồi của máy chủ. Đây là cách bạn có thể sử dụng lệnh đã cho để thêm cả hai gói vào ứng dụng React của mình.

npm install @tanstack/react-query axios --legacy-peer-deps

Bước 3: Cấu hình mô-đun Bootstrap

Khung khởi động hỗ trợ bạn tạo giao diện người dùng với tốc độ nhanh chóng trong ứng dụng của bạn. Bạn sẽ không phải nỗ lực thêm để tạo các thành phần giao diện người dùng.

npm i bootstrap --legacy-peer-deps

Sẽ đến bước thứ hai, trong đó bạn cần nhập css bootstrap trong tệp src/App.js.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
function App() {
  return <div></div>;
}
export default App;

Bước 4: Thiết lập truy vấn React

Nhập QueryClientProvider và QueryClient từ gói truy vấn phản ứng; bọc thành phần Ứng dụng bằng mô-đun QueryClientProvider. Hãy tiếp tục và thay thế mã App.js bằng mã đã cho.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// Create a client
const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

Bây giờ bạn đã sẵn sàng sử dụng tất cả các hook và hook đột biến thông qua mô-đun truy vấn phản ứng.

Bước 5: Xây dựng thành phần chức năng

Bạn phải tạo thư mục comComponents/, đồng thời là Users.js tệp thành phần hàm.

import React from 'react'
function Users() {
  return (
    <div>Users page</div>
  )
}
export default Users

Bước 6: Tạo máy chủ JSON

Để tạo máy chủ JSON, chúng ta cần cài đặt mô-đun json-server. Đây là lệnh bạn phải gọi để thêm mô-đun trên toàn cầu.

sudo npm install -g json-server --legacy-peer-deps

Tiếp theo, ở phần gốc của dự án React, bạn phải tạo tệp db.json, hãy nhớ thêm mã sau vào tập tin.

{
  "posts": [
  ]
}

Chạy máy chủ phụ trợ trên một màn hình đầu cuối khác bằng lệnh đã cho; nó sẽ cung cấp liên kết api trên màn hình bảng điều khiển.

json-server --watch db.json --port 3004

Bước 7: Đăng dữ liệu lên máy chủ bằng useMutation

Đây là tệp mà chúng tôi đang sử dụng mã để thực hiện đột biến nhằm thêm dữ liệu vào máy chủ. Đảm bảo đặt mã vào tệp comComponents/Users.js.

import React from "react";
import axios from "axios";
import { useMutation } from "@tanstack/react-query";
function Users() {
  const mutation = useMutation((DATA) => {
    return axios.post("http://localhost:3004/posts", DATA);
  });
  return (
    <div>
      {mutation.isLoading ? (
        "Adding post..."
      ) : (
        <>
          {mutation.isError ? (
            <div>Error : {mutation.error.message}</div>
          ) : null}
          {mutation.isSuccess ? <div>Post added! </div> : null}
          <button
            onClick={() => {
              mutation.mutate({
                title:
                  "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
                body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
              });
            }}
          >
            Create Post
          </button>
        </>
      )}
    </div>
  );
}
export default Users;

Bước 8: Cập nhật thành phần JS ứng dụng

Chúng tôi đã tạo thành phần duy nhất nên nó phải được nhập vào tệp App.js. Thay thế mã tệp App.js của bạn bằng mã sau.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Users from "./components/Users";
function App() {
  return (
    <div className="container mt-5">
      <h2>React Query Fetch Data useMutation Example</h2>
      <Users />
    </div>
  );
}
export default App;

Bước 9: Kiểm tra ứng dụng trên trình duyệt

Bạn gần như đã vượt qua tất cả những trở ngại cản đường bạn. Nhiệm vụ cuối cùng là chạy máy chủ ứng dụng và chạy ứng dụng trên trình duyệt.

npm start
http://localhost:3000

Phần kết luận

Trong ví dụ về đột biến sử dụng truy vấn React này, chúng ta đã học cách sử dụng hook useMutation truy vấn React để đăng hoặc tạo dữ liệu lên máy chủ trong ứng dụng React.

1.95 GEEK