react-query QueryObserverResult 的打字稿问题答案

【问题标题】：typescript issue with react-query QueryObserverResultreact-query QueryObserverResult 的打字稿问题
【发布时间】：2021-08-16 03:49:41
【问题描述】：

所以，我使用了带有 react-query 的选择器，当我尝试从缓存中提取一些值时出现错误。

这是我得到的错误： TS2339：“QueryObserverResult”类型上不存在属性“phone”。

这里 select 的“类型”是什么？

这里是缓存突变：

export default function useProductCache (select: ?): QueryObserverResult<Product, Error> {
  const queryClient = useQueryClient();

  return useQuery(
    queryKey,
    async () => {
      const product = await queryClient.getQueryData(queryKey);

      return product;
    },
    { select }
  );
}

这里是我创建“selector-esque”函数的地方：

export const useProductByKeysSelector = (keys: string[]) => useProductCache((data: Product) => {
  const objectByKeys = keys.reduce<Record<string, any>>((byKeys, k) => {
    byKeys[k] = get(data, k);
   
    return byKeys;
  }, {})

  return objectByKeys;
})

因此，“电话”在产品上。但它仍然给我一个错误（如上所述）？

如果我想在返回值中“添加”一个自定义键，我该如何输入呢？

【问题讨论】：

标签： typescript react-query

【解决方案1】：

select 的类型是一个函数，从您的 queryFn 返回的任何内容（产品）到您的钩子最终返回的任何内容：

select: (data: Product) => TResult

但最终结果必须出现在QueryObserverResult的类型中。您还可以摆脱 QueryObserverResult 类型并让类型推断来完成它的工作。

不过，我不太确定您要达到什么目的。为什么要创建一个只从查询缓存中读取的查询？ getQueryData 是同步的……

【讨论】：

我只是想创建一个从任何特定查询的“缓存”中读取的钩子。您是说没有理由将其包装在 useQuery 中吗？这不是让我们能够获得相同的返回 ala、isLoading 等...或者我可以使用： const product = queryClient.getQueryData(queryKey); ?并且做同样的事情？
我认为“获取缓存”比继续为我的产品访问服务器（如果我已经得到它）并能够使用“选择”更有意义。不？此外，在创建“选择器式”项目时，我不是总是调用 useQuery.. 似乎我可以通过返回缓存而不是实际使用“真实”查询来规避这一点。这是我使用的坏模式吗？在每个“选择器”类型中添加 useQuery('whatever'l.) 似乎是多余的。
首选方法是创建一个自定义的useProduct 挂钩，并在每次需要数据时调用它。当然，您可以将选择器传递给它（useProduct(p => p.something)），它的行为类似于 redux 中的 useSelector。我假设您只想从缓存中读取而不是每次都访问后端，这通常是设置自定义 staleTime 的目的。只要查询不是陈旧的（=新鲜的），数据将始终来自带有 useQuery 的缓存，并且不会发出请求（后台更新）。