typescript 如何使用useQuery重新输入来自API的响应？

46scxncf 于 2022-11-18 发布在 TypeScript

关注(0)|答案(2)|浏览(128)

因此，我使用react-query中的useQuery，我需要以用户身份从API返回响应（基于我的界面）。
我是这样做的：

export const getUsersQuery = () => "users";

export const useUsersQuery = () =>
 useQuery(getUsersQueryKey(), () =>
   axios
      .get("API ENDPOINT")
      .then((response) => response.data as User[])
);

我的朋友告诉我，这没有错，但也不是“最佳实践”，我应该查找如何使用useQuery的泛型参数重新键入我的响应，而不使用response.data as User[]，并将Users数组作为参数之一传递。
有人能告诉我如何更改代码吗？

typescript

来源：https://stackoverflow.com/questions/74374365/how-to-retype-response-from-api-using-usequery

2条答案

按热度按时间

8fq7wneg1#

您朋友说对了一部分，您实际上可以提供泛型类型来使用这样Query函数

useQuery<User[]>(key, queryFn);

但是最好的方法是简单地将响应类型添加到queryFunction中（useQuery的第二个参数），如果你专门写了它返回的内容，useQuery的返回类型就是正确的，不需要提供泛型类型。
因此，更好的选择如下所示：

const queryFn = (): Promise<User[]> => { ... };
const { data } = useQuery('users', queryFn);

赞(0）回复(0）举报 2022-11-18

whitzsjs2#

就在我发表这篇文章之后，我找到了一个答案。正如马拉特所说，泛型函数可以看起来像useQuery<User[]>(key, queryFn);。我发现this博客帮助我更好地理解useQuery的泛型。
React Query大量使用泛型。这是必要的，因为库实际上并不为您获取数据，并且它不知道您的API返回的数据将具有什么类型。
更改代码后，结果如下所示：

export const getUsersQuery = () => "users";

export const useUsersQuery = () =>
 useQuery<User[], Error>(getUsersQueryKey(), () =>
   axios
      .get("API ENDPOINT")
      .then((response) => response.data)
);

希望这对以后的人有帮助。

赞(0）回复(0）举报 2022-11-18

我来回答

typescript 如何使用useQuery重新输入来自API的响应？

2条答案

相关问题

热门标签

最新问答