阿波罗useQuery并不总是触发功能组件的重新呈现

Question

这是我从@apollo/client中使用useQuery的功能组件:

function MyComponent(props) {
const { data } = useQuery<MarketScannerSearchProps>(
MARKET_SCANNER_SEARCH_PROPS_QUERY,
{
onCompleted: (data) => {
console.log("completed", data)
},
}
)
console.log("data", data)
// ... rest of function + return rendered result
}

我得到这个在我的控制台:

data undefined
data undefined
completed {marketScannerSearchProps: {…}}

为什么结尾没有data {marketScannerSearchProps: {…}}?

这并不总是可重复的，只发生在每5次重新加载我的应用程序左右。这是它工作时的样子:

data undefined
data {marketScannerSearchProps: {…}}
completed {marketScannerSearchProps: {…}}

所以在组件第二次渲染时数据就在那里了，但并不总是这样，如果数据在第二次渲染时不在那里，它就不会在之后更新它。

每次查询完成后，apollo不应该触发重新渲染吗?我遗漏了什么?

编辑:我想这个问题现在已经解决了。我关闭和打开Chrome开发工具几次，现在它似乎消失了。会不会是阿波罗客户端缓存搞砸了?

Answer 1

我也有同样的问题。

这是React Dev Tools的问题(我已经尝试逐步删除各种chrome扩展，并始终发现React Dev Tools是罪魁祸首)。最好的解决方案，目前，是禁用React开发工具扩展，关闭Chrome开发工具，重新加载页面，然后一切都会工作。

由于这是React Dev Tools的问题，我将在他们的repo上创建一个GitHub问题，并更新这个答案的链接，以便将来任何人都可以找到它。