从自定义反应查询挂钩重命名属性

Question

我用 React Query 制作了一个自定义钩子。我想将 React Query 中名为“data”的值重命名为“customUser”，因此，如果我在 1 个文件中有多个挂钩，则不必担心多个名为“data”的变量。

但是当我将数据值重命名为 customUser 时，它将不起作用。

我不需要所有这些值，我只想返回数据值并命名为 customUser

Answer 1

react-query 总是会将您从 .react-query 返回的内容准确地放入缓存中queryFn。由于您使用的是axios，因此您返回的是一个具有多个字段的对象，例如headers、和。它是AxiosResponse类型，您将其全部放入反应查询缓存中。statusstatusTextdata

data然后，react-query 会在返回的结果字段中为您提供所有这些信息useQuery。这意味着useCustomUser().data实际上是AxiosResponse，您的“真实数据”也在其中.data。

所以如果你重命名：

const { data: customUser } = useCustomUser()

customUser.data将有您正在寻找的数据。

令人困惑？是的，非常如此。这就是为什么许多人在使用 axios 时选择不在缓存中存储太多内容，方法如下：

export const fetchUser = () => axios.get(url).then(response => response.data)

仅缓存dataAxiosResponse 的部分，并丢弃诸如statusText