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

昨天下雨，今天放晴，我们的感情也不过如此罢了

从0死磕全栈系列文章

从0死磕全栈第1天：从写一个React的hello world开始

手把手教你配置Vite：打造极速企业级前端开发环境

从0 死磕全栈第3天：React Router (Vite + React + TS 版)：构建小时站实战指南

从0死磕全栈第4天：使用React useState实现用户注册功能

从0死磕全栈第五天：React 使用zustand实现To-Do List项目

从0死磕全栈第6天：React useEffect副作用起了大作用之实现购物车功能

从0死磕全栈第 7 天：一文搞定 React 组件通信技巧

从0死磕全栈第八天：使用nest.js五分钟搭建后端开发环境

最近半个月，都在使用vscode写前端和后端，虽然一开始有些语言环境方面的配置会比goland,idea这些工具麻烦一些，但是只要配置好了，后面就会一马平川。

vscode本身就已经有很强的代码编辑能力，并且到今年已经有10年的历史，仍然以很快的速度更新。

因为之前后端环境已经搭建好了，虽然用户的接口比较简单，但是我们已经可以借助用户接口完成用户列表页面了。

这次我们决定用Trae IDE作为我们的AI IDE来实现打通后端接口，实现用户页面功能。

技术栈仍然是vite react ts，增加了react-query框架作为项目的调用后端接口的工具。

接着就来展示使用Trae 完成项目的过程。

首先我们要新建一个项目的文件夹，这里就叫 vite-reactts-reactq

这里也说下trae与vscode的一点区别，就是trae会把项目名放在IDE上面的中央位置，并且不会像vscode把项目名都大写。

第一步，打开trae聊天窗口

默认trae的聊天窗口是打开的，如果不小心关了，使用下面的快捷键打开

  
ctrl u

第二步，让trae创建项目

很快AI 给出了回答

基于前面的学习，创建项目的命令是对的，只是win的ps执行不了npm命令。

这里需要我们手动在terminal里面输入y 才会创建文件，所以AI的有些命令是需要跳过的。

接着执行npm install 安装依赖

然后就会配置react-query

它还很贴心的给出了一个使用react-query的例子

第二步，启动前端服务

第三步，启动后端服务

这个可以参见之前的文章

从0死磕全栈第八天：使用nest.js五分钟搭建后端开发环境

第四步，让trae开发用户列表页面

一开始trae 调用接口的方式是错误的

  
fetch("localhost:3000/users")

一开始我也不知道怎么处理，就知道让trae打断点看看

trae还教了我们如何断点调试

最后控制台还是报了错，我就继续问trae

这一步，虽然逻辑上说可以的，但是AI会卡在这里，所以我直接告诉他接口是可以的

这里AI使用了深度分析，我们可以看到他的分析过程

最后用户列表的页面的代码如下

  
import React from 'react'  
import { useQuery } from 'react-query'  
// 定义用户类型接口  
interface User {  
  id: number  
  name: string  
  email: string  
  // 可以根据实际API返回添加更多字段  
}  
// 获取用户列表数据的函数  
const fetchUsers = async (): Promise<User[]> => {  
  // 添加debugger语句进行断点调试  
  debugger;  
  console.log('开始请求用户数据...');  
  const response = await fetch('/api/users');  
  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 = () => {  
  // 使用react-query获取用户数据  
  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

vite代理配置

  
import { defineConfig } from 'vite'  
import react from '@vitejs/plugin-react'  
// https://vite.dev/config/  
export default defineConfig({  
  plugins: [react()],  
  server: {  
    proxy: {  
      '/api': {  
        target: 'http://localhost:3000',  
        changeOrigin: true,  
        rewrite: (path) => path.replace(/^\/api/, ''),  
      },  
    },  
  },  
})

queryCleint.ts

  
import { QueryClient } from 'react-query';  
// 创建QueryClient实例  
const queryClient = new QueryClient({  
  defaultOptions: {  
    queries: {  
      baseUrl: 'http://localhost:3000',  
      timeout: 5000,  
      retry: 1,  
    },  
  },  
});  
export default queryClient;

结果页面如下

填坑

之前的debug方式其实是没效果的，所以我要问trae如何调试react tsx

中间也折腾了很久，第一个问题还是ps 执行不了npm run dev 的问题，

  
执行npm run dev npm : 无法加载文件 D:\dl\node-v22.16.0  
  
-win-x64\npm.ps1，因为在此系统上禁止运  
  
行脚本。有关详细信息，请参阅 https:/go  
  
.microsoft.com/fwlink/?LinkID=135170  
  
中的 about_Execution_Policies。

接着又是

大概意思是没配置对chrome.exe的位置。这里trae并没有找到电脑上的chrome.exe位置，所以自己手动配置了。

  
{  
  "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/**"  
      ]  
    }  
  ]  
}

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"  
    }  
  ]  
}

配置好之后

点击右边的虫子按钮就可以调试了！

下面来说下用vscode开发的无论是前端还是后端，都需要接触的debug配置文件launch.json

🔍 VS Code调试React应用：launch.json配置详解

🛠️ 基本配置

  
{  
  "version": "0.2.0",  
  "configurations": [...]  
}

version：配置文件版本号（固定0.2.0）

configurations：存放所有调试配置的数组

⚙️ 核心配置项

  
{  
  "type": "chrome",  
  "request": "launch",  
  "name": "调试React应用"  
}

type：指定使用Chrome调试器

request：launch表示启动新浏览器（attach是连接已有浏览器）

name：给你的调试配置起个易懂的名字

🌐 网络与路径

  
{  
  "url": "http://localhost:5174",  
  "webRoot": "${workspaceFolder}/src"  
}

url：项目运行的本地地址（Vite默认5174端口）

webRoot：指定源码目录（通常是src文件夹）

🚀 高级配置

  
{  
  "preLaunchTask": "npm: dev",  
  "skipFiles": ["node_modules/**"]  
}

preLaunchTask：调试前自动执行的任务（如启动开发服务器）

skipFiles：跳过不需要调试的代码（如node_modules）

最后就可以愉快地调试了！