我一直在使用react-apollo
和渲染props方法。
这工作得很好,我的代码看起来像这样。
const App = () => {
const [player, setPlayer] = React.useState(null);
if (player) {
return (
<GetBroncosPlayerQuery variables={{ player }}>
{({ data }) => {
// do stuff here with a select box
}}
</GetBroncosPlayersQuery>
)
}
}
现在,如果我尝试对useQuery
钩子做同样的事情,当我的代码如下所示时,我会收到以下错误:
const App = () => {
const [player, setPlayer] = React.useState(false);
if (isBroncos) {
const { data } = useQuery(GetBroncosPlayersQueryDocument, {
variables: { player }
});
// do stuff here
}
}
这会导致您无法在条件语句中使用钩子的错误。然后我实现了useLazyQuery
但是这也不起作用,因为一旦它表现得像useQuery
,那么它第一次就起作用了,但是如果用户将选择下拉列表再次更改为空,它就会中断。
查询挂钩仅有条件地调用查询的最佳方法是什么?