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

Question

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

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

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

Answer 1

访问要在数据内部使用的数据响应时（重命名之前），您可以使用“data.data”访问它。重命名后，您只需使用“customUser.data”。

Answer 2

react-query 将始终将 return 来自 queryFn 的内容准确地放入缓存中。由于您正在使用 axios，因此您 returning 是一个具有多个字段的对象，例如 headers、status、statusText 和 data .它是 AxiosResponse 类型，而您将其全部放入反应查询缓存中。

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

中

因此，如果您重命名：

const { data: customUser } = useCustomUser()

customUser.data会有你要找的数据。

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

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

只缓存 AxiosResponse 的 data 部分，并丢弃 statusText

之类的东西

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

Renaming properties from custom react-query hook

rename

reactjs

react-query