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

Posted 2023-03-08

【中文标题】urql useQuery 的暂停选项不会暂时冻结请求

【英文标题】：urql useQuery's pause option doesn't freezes the request temporarily

【发布时间】：2020-11-12 01:06:44

【问题描述】：

我正在尝试使用以下代码一次执行 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 一次执行查询的最佳方法是什么？

【参考方案1】：

这里是 Urql 维护者，我假设如果组件不断重新安装，那么会发生一些额外的事情。这个钩子不应该让包装组件重新挂载。

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

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

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

【讨论】：

非常感谢您的回答。这将解决目的。但是如果我将 paused 选项设置为true，我仍然不明白为什么我的查询会被执行。暂停的用例是否与我的理解不同？

我在 App Root 组件中制作了这个 useQuery 钩子，它需要初始配置，它还会在此查询结果之后设置全局上下文值，从而导致重新渲染。

另一个用例，我不想调用 s-s-r（需要存在 xcsrf cookie 和令牌），因此将暂停选项设置为 true。但它仍然在那里打电话。

@AnkitBalyan 这对我来说似乎可以正常工作codesandbox.io/s/nervous-butterfly-xwwh8?file=/src/components/…

【参考方案2】：

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

要对此进行测试，请添加：

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

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

【讨论】：

不，组件仅在一次渲染。如果我传递空的依赖数组，这个 useEffect 钩子只会被调用一次。