Question

因此，我将选择器样式与 react-query 结合使用，当我尝试从缓存中提取某些值时出现错误。

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

这里选择的“类型”是什么？

这里是缓存突变：

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;
})

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

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

Answer 1

select 的类型是一个函数，从你的 queryFn 返回的任何东西（产品）到你的钩子最终应该返回的东西：

select: (data: Product) => TResult

但最终结果必须出现在 QueryObserverResult 类型中。你也可以摆脱 QueryObserverResult 类型，让类型推断来做它的工作。

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

react-query QueryObserverResult 的打字稿问题

1 个答案: