How do I type onSuccess data in React Query?

在React Query中使用TypeScript来键入onSuccess回调函数中的数据是一个非常好的实践，因为它可以提高代码的可读性和可维护性，并且可以在编译时就捕捉到可能的错误。

首先，假设我们使用React Query的useQuery或useMutation等Hooks来从服务器获取数据或提交数据。我们需要定义这些数据的类型。

例如，如果我们正在从一个API获取用户信息，我们可能会有一个类型为User的接口：

typescript
interface User {
  id: string;
  name: string;
  email: string;
}

// 使用useQuery来获取数据
const { data, error, isLoading } = useQuery<User, Error>('user', fetchUser);

在这个例子中，fetchUser是一个异步函数，它负责调用API并返回数据。它应该被定义为返回一个Promise<User>。

现在，当定义onSuccess回调函数时，由于我们已经在useQuery中指定了查询的返回类型是User，onSuccess的参数类型也会自动被推导为User:

typescript
useQuery<User, Error>('user', fetchUser, {
  onSuccess: (data) => {
    console.log("用户数据：", data);
    // 这里可以安全地访问 data.id, data.name 和 data.email
  },
  onError: (error) => {
    console.error("出错了：", error.message);
  }
});

在这个代码段中，onSuccess中的data参数已经被TypeScript推导为User类型，这意味着你可以安全地访问data.id、data.name和data.email等属性，而且如果你尝试访问data的任何不存在的属性，TypeScript将在编译时报错。

这样，我们不仅确保了代码的类型安全，还提高了代码质量，并减少了运行时错误的可能性。