urql useQuery的pause选项不会暂时冻结请求

Question

我试着用下面的代码一次只执行urql useQuery。但由于某些原因，每次重新渲染时都会调用它。

根据文档https://formidable.com/open-source/urql/docs/basics/queries/#pausing-usequery，这个查询最初应该在渲染时暂停，并且只有在挂载时从React.useEffect调用时才会执行。

const [{ fetching, data, error }, reExecute] = useQuery({
  query: INITIAL_CONFIG_QUERY,
  pause: true
});

React.useEffect(() => {
  reExecute();
}, []);

使用urql一次执行查询的最佳方式是什么？

Answer 1

Urql维护者在这里，我假设如果组件不断地重新挂载，就会发生一些额外的事情。这个钩子永远不会使包装组件重新挂载。

也就是说，您可以始终使用useClient挂钩来获取urql-client，然后在该挂钩中使用client.query().toPromise()并使用返回的结果。

在您的情况下，这可能是：

const MyComponent = () => {
  const client = useClient();
  useEffect(() => {
     client.query(
       INITIAL_CONFIG_QUERY
     ).toPromise().then(result => /* do something */)
  }, [])
}

Answer 2

这可能是urlq错误，但也可能是您的组件在每次父组件重新呈现时都会被卸载并重新挂载。

要测试这一点，请添加：

React.useEffect(() => {
  console.log("Component was mounted.");
}, []);

并查看是否多次打印console.log语句。