Apollo 客户端基于状态跳过查询

Posted 2023-03-10

【中文标题】Apollo 客户端基于状态跳过查询

【英文标题】：Apollo client skip query based on state

【发布时间】：2020-11-07 15:47:24

【问题描述】：

使用 Apollo 客户端，我了解如何跳过基于 props 的查询，如下所示 https://ladwhocodes.com/graphql/skip-a-graphql-query-based-on-conditions/31/

但是，如果我想跳过根据状态变化调用我的查询呢？

我有一个查询设置为每 5 秒轮询一次，但我想在对话打开时暂停此轮询（以避免重新渲染对话的父组件，导致对话重新渲染然后必须聚焦光标以前的位置）。

我试过了，但它不起作用。我想要的行为可能吗？

P.S：也尝试将对话打开/关闭状态移动到父组件，但这也不起作用。

const [scoreRunDialougeOpen, setScoreRunDialougeOpen] = useState(false)  

const  loading, data, error  = useQuery(GET_SELECTED_HEAT, 
    variables: 
        id: eventId
    ,
    pollInterval: scoreRunDialougeOpen ? undefined : 5000,
    skip: scoreRunDialougeOpen,
);

【参考方案1】：

嘿伙计们，我实际上设法让它在没有停止投票的情况下运行。 我正在为一个沙盒项目简化我的演示，我让它完全按照我想要的方式工作

https://codesandbox.io/s/heuristic-pine-2cxi7?file=/src/EventList.js

最后我真正想要的是对话框在打开时不被重新渲染（我认为停止轮询是实现这一目标的简单方法，但似乎不是）

所以你可以看到我所做的只是将对话框移动到与 UseQuery 相同的组件中并且它工作正常（因为在对话框中没有重新渲染）

在我的原始解决方案中，包含 Dialog 的子组件接收查询数据作为道具，因此当数据更改时显然会重新渲染。