2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家 

构建 React 前端：文档库与聊天界面（第五部分）

React Query 的 refetchInterval 将轮询需求简化为一行代码。以下是整个前端的详细解析。

前端是演示成功与否的关键所在。面试官会四处点击操作。文件上传需要感觉即时完成，流水线状态需要在不刷新页面的情况下更新，而聊天回复需要提供引用来源，以证明人工智能确实阅读了文档，而不仅仅是生成了听起来合理的虚构文本。

本文介绍了这些功能的工作原理，从身份验证开始，逐步讲解上传、状态轮询以及聊天界面。

技术选型

在深入之前，先快速盘点一下技术栈：

• Vite — 比 Create React App 更快的开发服务器，原生支持 ES 模块的热模块替换，配置简单直观
• React 18 + TypeScript — 启用严格模式，不使用 any 类型，所有应用程序接口响应在边界处均进行类型定义
• Tailwind v4 — 实用优先，无需维护单独的层叠样式表文件
• React Query (@tanstack/react-query) — 管理服务器状态，自动使缓存失效，并实现下文讨论的轮询行为
• AWS Amplify UI — Authenticator 组件处理完整的 Cognito 登录/注册流程，无需自定义用户界面
• Axios — 请求拦截器在每个出站请求中注入持有者令牌

身份验证：Amplify 与令牌拦截器

configureAmplify() 在模块加载时运行一次，早于任何其他内容渲染：

export function configureAmplify() {
  Amplify.configure({
    Auth: {
      Cognito: {
        userPoolId:       import.meta.env.VITE_USER_POOL_ID,
        userPoolClientId: import.meta.env.VITE_USER_POOL_CLIENT_ID,
        loginWith: {
          oauth: {
            domain:          import.meta.env.VITE_COGNITO_DOMAIN,
            scopes:          ['email', 'openid', 'profile'],
            redirectSignIn:  [
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。