使用 TanStack Query 构建聊天应用

TanStack Query 简介

TanStack Query 是一个强大的库，用于在 React 应用程序中管理服务器状态。它简化了数据获取、缓存、同步和服务器状态更新，使构建快速且用户友好的应用程序变得更加容易。在本教程中，我们将使用 TanStack Query 构建一个简单的聊天应用，管理我们的数据获取和缓存。我们将使用 React 作为前端框架，并使用一个模拟 API 来处理聊天消息。 TanStack Query 简介

前提条件

在开始之前，请确保你已安装以下内容：

• Node.js
• React 基础知识
• 对 Hooks 的熟悉 前提条件

第一步：设置 React 应用

首先，我们需要设置 React 应用。你可以使用 Create React App 作为示例。

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

接下来，安装 TanStack Query 库：

npm install @tanstack/react-query

设置 React 应用程序

第二步：创建模拟 API

为了教程的目的，我们将使用一个简单的模拟 API。你可以使用像 json-server 这样的服务来创建一个模拟后端。要安装 json-server，请运行：

npm install -g json-server

在项目根目录创建一个 db.json 文件，内容如下，以表示聊天消息：

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

现在，运行 json-server：

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

你的 API 将在 http://localhost:5000/messages 可用。 创建模拟 API

第三步：设置 TanStack Query

现在让我们在应用中设置 TanStack Query。打开 src/index.js 并将应用包装在 QueryClientProvider 中。

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

const queryClient = new QueryClient();

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

设置 TanStack Query

第四步：获取消息

接下来，我们将创建一个组件来获取和显示聊天消息。创建一个新文件 src/Chat.js 并添加以下代码：

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;

获取消息

第五步：添加消息表单

现在，让我们添加一个表单，允许用户发送新消息。更新 src/Chat.js 文件，添加以下代码：

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

// ... (其余代码保持不变)

function Chat() {
  // ... (其余代码保持不变)

  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;

添加消息表单

结论

在本教程中，我们成功使用 TanStack Query 构建了一个简单的聊天应用，管理数据获取和状态管理。我们学习了如何在 React 应用中设置 TanStack Query，从模拟 API 获取数据，在 React 组件中显示数据，向 API 发送新消息，并使用 mutations 更新 UI。你可以通过添加用户认证、消息时间戳或使用 WebSocket 等技术实现实时功能来扩展此应用。祝你编码愉快！