在apollo useQuery之后，渲染的钩子比上一次渲染时多

Question

我正在寻找一种方法来纠正Hook渲染错误。我总共有3个useQuery钩子正在呈现：

const {
data: OSData,
error: OSError,
loading: OSLoading,
} = useQuery(OSData, {
variables: {
NUMBER: UniqueList,
},
})
const {
data: RamData,
error: RamERROR,
loading: RamLOADING,
} = useQuery(GET_Ram)

const {
data: Hardware,
error: HardwareERROR,
loading: HardwareLOADING,
} = useQuery(GET_Hardware)

变量"NUMBER"基于由GET_Ram和GET_Hardware查询生成的列表"UniqueList"，因此需要稍后调用OSData查询，或者存在未定义的变量。但是，稍后在代码中调用OSData Query会导致呈现错误。

你知道我该怎么做吗？

谢谢！

Answer 1

我发现的一个答案是使用惰性查询。

const SomeData [{
called, loading, data
}] = useLazyQuery(OSData)
})
if (called && loading) return <p>Loading ...</p>
if (HardwareLOADING || RamLOADING) return <p> loading</p>
if (HardwareERROR || RamERROR) return <p>error</p>

//perform all the needed calculations for the variable here

在return语句中，您可以调用查询并提供变量。这里我用一个按钮。

<div>
<button onClick={() => SomeData({ variables: { NUMBER: uniqueList } })}>
Load{' '}
</button>
</div>

希望这能帮助