Xây dựng Ứng dụng Chat với TanStack Query

Giới thiệu về TanStack Query

TanStack Query là một thư viện mạnh mẽ để quản lý trạng thái máy chủ trong các ứng dụng React. Nó đơn giản hóa việc lấy dữ liệu, bộ đệm, đồng bộ hóa và cập nhật trạng thái máy chủ, giúp việc xây dựng các ứng dụng nhanh chóng và thân thiện với người dùng trở nên dễ dàng hơn. Trong hướng dẫn này, chúng ta sẽ xây dựng một ứng dụng chat đơn giản bằng cách sử dụng TanStack Query để quản lý việc lấy dữ liệu và bộ đệm. Chúng ta sẽ sử dụng React làm framework giao diện người dùng và một API giả lập cho các tin nhắn chat. Giới thiệu về TanStack Query

Yêu cầu tiền đề

Trước khi bắt đầu, đảm bảo bạn đã cài đặt các phần sau:

• Node.js
• Kiến thức cơ bản về React
• Sự quen thuộc với hooks Yêu cầu tiền đề

Bước 1: Cài đặt một Ứng dụng React

Đầu tiên, chúng ta cần cài đặt ứng dụng React của mình. Bạn có thể sử dụng Create React App cho ví dụ này.

npx create-react-app chat-app
cd chat-app

Tiếp theo, cài đặt thư viện TanStack Query:

npm install @tanstack/react-query

Cài đặt Ứng dụng React

Bước 2: Tạo một API Giả lập

Để phục vụ cho mục đích hướng dẫn này, chúng ta sẽ sử dụng một API giả lập đơn giản. Bạn có thể sử dụng dịch vụ như json-server để tạo một backend giả lập. Để cài đặt json-server, chạy:

npm install -g json-server

Tạo một tệp db.json ở gốc dự án của bạn với nội dung sau để đại diện cho các tin nhắn chat:

{
  "messages": [
    { "id": 1, "text": "hello!", "user": "alice" },
    { "id": 2, "text": "hi there!", "user": "bob" }
  ]
}

Bây giờ, chạy json-server:

json-server --watch db.json --port 5000

API của bạn sẽ có sẵn tại http://localhost:5000/messages. Tạo API Giả lập

Bước 3: Cài đặt TanStack Query

Bây giờ chúng ta sẽ cài đặt TanStack Query trong ứng dụng của mình. Mở tệp src/index.js và bọc ứng dụng của bạn bằng QueryClientProvider.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

const queryClient = new QueryClient();

function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
}

Cài đặt TanStack Query

Bước 4: Lấy Tin nhắn

Tiếp theo, chúng ta sẽ tạo một thành phần để lấy và hiển thị các tin nhắn chat. Tạo một tệp mới src/Chat.js và thêm mã sau:

import { useQuery } from '@tanstack/react-query';

const fetchMessages = async () => {
  const response = await fetch('http://localhost:5000/messages');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function Chat() {
  const { data, error, isLoading } = useQuery('messages', fetchMessages);

  if (isLoading) {
    return <div>Loading messages...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>Chat Messages</h1>
      {data.messages.map((message) => (
        <div key={message.id}>
          <strong>{message.user}</strong>: {message.text}
        </div>
      ))}
    </div>
  );
}

export default Chat;

Lấy Tin nhắn

Bước 5: Thêm Biểu mẫu Tin nhắn

Bây giờ, chúng ta sẽ thêm một biểu mẫu để cho phép người dùng gửi các tin nhắn mới. Cập nhật tệp src/Chat.js với mã sau:

import { useQuery, useMutation } from '@tanstack/react-query';

// ... (phần còn lại của mã giữ nguyên)

function Chat() {
  // ... (phần còn lại của mã giữ nguyên)

  const [messageText, setMessageText] = useState('');

  const addMessage = useMutation(
    async (newMessage) => {
      const response = await fetch('http://localhost:5000/messages', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newMessage),
      });
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries('messages');
      },
    }
  );

  const handleSubmit = (event) => {
    event.preventDefault();
    addMessage.mutate({ text: messageText, user: 'You' });
    setMessageText('');
  };

  return (
    <div>
      <h1>Chat Messages</h1>
      {data.messages.map((message) => (
        <div key={message.id}>
          <strong>{message.user}</strong>: {message.text}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={messageText}
          onChange={(event) => setMessageText(event.target.value)}
          placeholder="Type your message..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

export default Chat;

Thêm Biểu mẫu Tin nhắn

Kết luận

Trong hướng dẫn này, chúng ta đã xây dựng thành công một ứng dụng chat đơn giản bằng cách sử dụng TanStack Query để quản lý việc lấy dữ liệu và trạng thái. Chúng ta đã học cách cài đặt một ứng dụng React với TanStack Query, lấy dữ liệu từ API giả lập, hiển thị dữ