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

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 语句是否被多次打印。

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

urql useQuery's pause option doesn't freezes the request temporarily

javascript

reactjs

graphql

react-hooks

urql