javascript 为什么对每个观察者都调用useQuery？

hs1rzwqc 于 2022-12-28 发布在 Java

关注(0)|答案(1)|浏览(144)

我拥有的

我使用useQuery的onSuccess回调来验证API调用是否返回数据，如果响应不返回数据，则呈现带有消息"未找到结果"的toast。

问题是

toast被多次呈现，每个观察者一次，我知道这是预期的行为，因为钩子是为每个观察者执行的。

我想要的

我搜索了一些资源，虽然其中一些提到全局回调可以用来避免这种行为，但我不清楚如何过滤请求，使其只对其中一些显示此toast。我的意思是，如果请求的查询键等于"search"，而响应没有返回结果。

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onSuccess: (error) =>
      // how to filter here the request to show the toast
      // according to the queryKey and if no data is retrieved from the backend
  }),
})

其他问题

1.是否有其他方法可以避免这种行为（在每个观察器中运行代码）？

更新1

我使用axios作为客户端，我应该如何处理TS输入错误或成功回调？

JavaScript

来源：https://stackoverflow.com/questions/74926655/why-is-usequery-being-called-for-every-observer

1条答案

按热度按时间

yi0zb3m41#

问题是你得到了一个伪装成成功条件的失败条件。比如你的API返回了一个200响应但是没有数据。在这种情况下，正确的做法不是用onSuccess处理程序来处理这个问题，而是从你的查询函数中抛出一个错误，让你的onError处理程序来管理它。

useQuery({
  queryKey,
  queryFn: async (..args) => {
     const response = await actualQueryFn(...args);
     if(!response.data) throw new Error("No Data");
     return response;
  }
});

onError处理程序将接收错误和查询，从那里您可以反省查询以确定显示什么消息。
例如：

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error, query) => {
      // Do stuff with query and error to show the right toast message.
    }
  }),
})

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 为什么对每个观察者都调用useQuery？

我拥有的

问题是

我想要的

其他问题

更新1

1条答案

相关问题

热门标签

最新问答