React-query：useQuery 返回未定义且组件不会重新渲染

Question

我正在玩reactQuery一个小演示应用程序，您可以在这个存储库中看到。应用程序调用此模拟 API。

我遇到了一个问题，即我使用钩子在产品 API文件useQuery中调用此函数：

export const getAllProducts = async (): Promise<Product[]> => {
  const productEndPoint = 'http://localhost:5000/api/product';
  const { data } = await axios.get(productEndPoint);
  return data as Array<Product>;
};

然后在我的ProductTable组件中，我使用以下方法调用此函数：

const { data } = useQuery('products', getAllProducts);

我发现确实调用了 API，并且返回了数据。但网格中的表始终是空的。

如果我调试，我会看到 useQuery 返回的数据对象未定义。

Web 请求确实成功完成，我可以在浏览器中的请求下的网络选项卡中看到返回的数据。

我怀疑它的结构方式getAllProducts可能是异步等待问题，但无法完全弄清楚。

谁能建议 IO 可能出问题的地方吗？

Answer 1

我已经成功地让这个工作了。为了他人的利益，我将分享我的经验：

我从 api 函数开始做了一些小改动。将函数更改为以下内容：

export const getAllProducts = async (): Promise<Product[]> => {
   const response = await axios.get(`api/product`, {
     headers: {
       Accept: 'application/json',
       'Content-Type': 'application/json',
     },
 });

  return response.data as Product[];
};

我不会解构调用的响应axios，而是从中获取数据对象并返回为 Product[]

然后我改变的第二件事是在我的ProductTable组件中。useQuery在这里，我通过将调用更改为来告诉您期望哪种类型的响应：

const { data } = useQuery<Product[], Error>('products', getAllProducts);

最后，我犯了一个菜鸟错误：因为我在本地主机上运行的 docker 容器中使用模拟 api，并使用 http://localhost:5000/api/product 调用它，所以我得到了众所周知的网络错误：

本地主机已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头...

因此，为了解决这个问题，为了本练习的目的，我只是向 packages.json 文件添加了一个属性： "proxy":"http://localhost:5000",

现在，这已成功地允许按照我的预期获取数据。