How can I upload a file using " react - query " and " type - script "?

在使用 React Query 和 TypeScript 上传文件时，首先需要确保你已经在你的项目中安装了 react-query 和设置了 TypeScript。接下来，我将分步骤详细地解释整个过程：

第一步：创建服务函数来处理文件上传

在使用 React Query 上传文件之前，我们需要先创建一个函数来处理实际的文件上传逻辑。这通常涉及到使用 fetch API 或者其他库（如 axios）来发送一个 POST 请求到服务器。

这里是一个使用 fetch 和 FormData 的 TypeScript 示例函数：

typescript
interface UploadResponse {
  success: boolean;
  message: string;
  url?: string;
}

async function uploadFile(file: File): Promise<UploadResponse> {
  const formData = new FormData();
  formData.append("file", file);

  const response = await fetch("https://your-upload-endpoint.com", {
    method: "POST",
    body: formData,
  });

  if (!response.ok) {
    throw new Error('Failed to upload file');
  }

  return response.json();
}

第二步：使用 React Query 的 useMutation 钩子

React Query 的 useMutation 钩子非常适合处理这种可能改变服务器状态的异步操作，如文件上传。通过使用 useMutation，我们可以轻松地追踪上传状态、错误处理和数据更新。

在组件中，你可以如下使用这个钩子和上传函数：

typescript
import { useMutation } from 'react-query';

const FileUploader: React.FC = () => {
  const { mutate, isLoading, isError, error, isSuccess } = useMutation(uploadFile);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files?.length) {
      const file = event.target.files[0];
      mutate(file);  // 调用上传函数
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {isLoading && <p>Uploading...</p>}
      {isError && <p>Error: {error instanceof Error ? error.message : 'Unknown error'}</p>}
      {isSuccess && <p>Upload successful!</p>}
    </div>
  );
};

第三步：处理上传状态的反馈

如上面代码中所示，我们可以通过 isLoading, isError, error, 和 isSuccess 等标志来向用户提供关于上传状态的实时反馈。这可以帮助提升用户体验，让用户了解当前正在发生的事情。

总结

通过组合使用 react-query 的 useMutation 钩子和 TypeScript，我们可以创建一个健壮且类型安全的文件上传功能。这种方法的好处是可以简化状态管理和错误处理，同时让代码更加清晰和易于维护。