从0死磕全栈第九天：Trae AI IDE一把梭，使用react-query快速打通前后端接口调试

昨天下雨，今天放晴，我们的感情也不过如此罢了------但代码，却能一直跑下去。

最近半个月，我一直在使用 VSCode 开发前端和后端项目。虽然一开始配置语言环境比 Goland、IDEA 等工具麻烦些，但一旦配置好，后续开发就一马平川。VSCode 已有十年历史，依然保持高频更新，生态强大。

此前我们已经完成了 《从0死磕全栈第8天：使用 Nest.js 五分钟搭建后端开发环境》 的搭建，后端接口已就绪。本次，我们尝试使用全新的 AI IDE ------ Trae IDE，来打通前后端，实现一个完整的「用户列表」页面功能。

技术栈概览

• 前端：Vite + React + TypeScript
• 状态管理 & API 请求：React Query
• 后端 ：Nest.js（已部署于 localhost:3000）
• IDE：Trae（AI 驱动的集成开发环境）

---

第一步：创建项目文件夹

在终端中执行：

mkdir vite-reactts-reactq
cd vite-reactts-reactq

✅ Trae 与 VSCode 的区别：

• Trae 将项目名居中显示在顶部；
• 不会自动将项目名转为大写，更符合开发者习惯。

---

第二步：打开 Trae 聊天窗口

默认情况下，Trae 的聊天窗口是开启的。若关闭，按快捷键：

Ctrl + U

让 Trae 创建项目

在聊天框输入：

"请用 Vite 创建一个 React + TypeScript 项目，并安装 react-query"

Trae 会返回如下命令：

npm create vite@latest . -- --template react-ts

⚠️ 注意 ：在 Windows 上，如果使用 PowerShell 执行 npm 命令失败，需手动在终端输入 y 确认创建。

接着安装依赖：

npm install

然后安装 react-query：

npm install react-query

Trae 还贴心地提供了一个 useQuery 使用示例：

import { useQuery } from 'react-query';

const fetchUsers = async () => {
  const res = await fetch('/api/users');
  if (!res.ok) throw new Error('Failed to fetch users');
  return res.json();
};

const UserList = () => {
  const { data, isLoading, error } = useQuery('users', fetchUsers);

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

  return (
    <ul>
      {data.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
};

---

第三步：启动前端服务

在 Trae 终端中运行：

npm run dev

🚨 常见问题 ：
npm : 无法加载文件 xxx\pm.ps1，因为在此系统上禁止运行脚本
解决方案：以管理员身份打开 PowerShell，执行：

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

---

第四步：启动后端服务（Nest.js）

请参考之前文章：《从0死磕全栈第8天：使用 Nest.js 五分钟搭建后端开发环境》

确保后端服务运行在 http://localhost:3000，并提供 /api/users 接口。

---

第五步：让 Trae 开发用户列表页面

我们在 src/components/UserList.tsx 中编写组件。

初次尝试出错

Trae 初始生成的请求代码为：

fetch("localhost:3000/users") // ❌ 错误！缺少协议

正确写法应为：

fetch("http://localhost:3000/api/users") // ✅ 正确

但更推荐使用 Vite 代理 来简化路径。

配置 Vite 代理（关键！）

在 vite.config.ts 中添加：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})

这样，前端只需调用 /api/users，Vite 会自动代理到 http://localhost:3000/users。

配置 React Query 客户端（queryClient.ts）

新建 src/lib/queryClient.ts：

import { QueryClient } from 'react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      timeout: 5000,
      retry: 1,
    },
  },
});

export default queryClient;

完整的 UserList 组件代码

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

// 定义用户类型接口
interface User {
  id: number;
  name: string;
  email: string;
}

// 获取用户列表数据的函数
const fetchUsers = async (): Promise<User[]> => {
  debugger; // 可用于断点调试
  console.log('开始请求用户数据...');
  const response = await fetch('/api/users'); // 通过 Vite 代理访问
  console.log('请求完成，状态码:', response.status);
  
  if (!response.ok) {
    console.error('请求失败:', response.status, response.statusText);
    throw new Error('Failed to fetch users');
  }
  
  const data = await response.json();
  console.log('获取到用户数据:', data);
  return data;
};

// UserList 组件
const UserList: React.FC = () => {
  const { data: users, isLoading, isError, error } = useQuery<User[]>(
    'users', // 查询键
    fetchUsers, // 获取数据的函数
    {
      refetchOnWindowFocus: false, // 窗口聚焦时不重新获取
      retry: 2, // 失败时重试2次
    }
  );

  // 加载状态
  if (isLoading) {
    return <div className="loading">Loading users...</div>;
  }

  // 错误状态
  if (isError) {
    return <div className="error">Error: {error?.message}</div>;
  }

  // 数据展示
  return (
    <div className="user-list-container">
      <h2>User List</h2>
      {users && users.length > 0 ? (
        <table className="user-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Email</th>
            </tr>
          </thead>
          <tbody>
            {users.map((user) => (
              <tr key={user.id} className="user-row">
                <td>{user.id}</td>
                <td>{user.name}</td>
                <td>{user.email}</td>
              </tr>
            ))}
          </tbody>
        </table>
      ) : (
        <p className="no-users">No users found</p>
      )}
    </div>
  );
};

export default UserList;

💡 提示 ：Trae 在生成代码时会加入 debugger; 语句，便于后续调试。

---

第六步：配置 VS Code 调试（重要！）

虽然使用 Trae，但最终调试仍推荐使用 VS Code + Chrome 插件，更稳定高效。

1. 配置 launch.json

在 .vscode/launch.json 中添加：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome for React Debug",
      "url": "http://localhost:5174",
      "runtimeExecutable": "C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\Bin\\Google Chrome.exe",
      "webRoot": "${workspaceFolder}/src",
      "preLaunchTask": "npm: dev",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      },
      "skipFiles": ["<node_internals>/**", "node_modules/**"]
    }
  ]
}

⚠️ 请根据你的实际 Chrome 安装路径修改 runtimeExecutable。

2. 配置 tasks.json

在 .vscode/tasks.json 中添加：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "shell",
      "command": "cmd",
      "args": ["/c", "npm", "run", "dev"],
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "problemMatcher": [],
      "label": "npm: dev",
      "detail": "Run npm dev server with cmd"
    }
  ]
}

3. 启动调试

1. 在 VS Code 中点击左侧"调试"图标（虫子按钮）；
2. 选择 "Launch Chrome for React Debug"；
3. 点击绿色播放按钮；
4. VS Code 会自动启动开发服务器，并在 Chrome 中打开页面，进入断点调试模式！

✅ 成功后即可在代码中设置断点、查看变量、监控网络请求！

---

最终效果

页面成功渲染出从 Nest.js 后端获取的用户数据，响应式、无刷新、带加载/错误状态处理。

---

总结：Trae IDE 的优势与局限

优点	局限
✅ AI 自动生成代码、配置、注释	❌ 有时生成的命令不兼容 Windows（如 PowerShell）
✅ 内置聊天助手，快速解决问题	❌ 无法自动识别 Chrome 路径，需手动配置
✅ 快速原型开发效率极高	❌ 调试能力弱于 VSCode，建议配合使用
✅ 支持 TypeScript、React、Vite 全家桶	❌ 项目结构管理不如 VSCode 清晰

🔧 最佳实践 ：用 Trae 快速搭建和生成代码，用 VSCode 进行深度调试与工程化管理。

---

结语

从写第一个 Hello World，到打通前后端、配置代理、使用 React Query、完成调试配置，整个过程只用了不到一天时间。这正是现代前端开发的魅力所在------工具越来越智能，但开发者的核心能力依然是理解原理、解决问题。

如果你也在寻找提升效率的 AI 编程工具，Trae 值得一试。但别忘了：AI 是杠杆，你才是那个撬动世界的人。

---

📌 相关阅读：

• 《从0死磕全栈第1天：写一个React的hello world》
• 《从0死磕全栈第8天：使用 Nest.js 五分钟搭建后端》