渲染的钩子比上次渲染期间更多

Question

如何将 2 个 graphql 查询与 react-apollo-hooks 一起使用，其中第二个查询依赖于从第一个查询中检索到的参数？

我尝试使用 2 个查询，如下所示：

const [o, setO] = useState()
const { loading: loadingO, error: errorO, data: dataO } = useQuery(Q_GET_O, { onCompleted: d => setO(d.getO[0].id) });
if (loadingO) { return "error" }
const { loading: loadingOP, error: errorOP, data: dataOP } = useQuery(Q_GET_OP, { variables: { o } })

但是，当我运行我的项目时，反应钩子给了我以下消息：

"index.js：1437 警告：React 检测到升级调用的钩子顺序发生了变化。如果不修复，这将导致错误和错误。有关更多信息，请阅读钩子规则">

我想知道如何使用 react-apollo-hooks 来运行依赖于另一个查询的查询。如果提前知道 graphql 查询变量，它会很好用。但是，我没有找到来自其他查询的变量的解决方案。

Answer 1

这里的问题是，在所有钩子都有机会运行之前，您正在短路返回。

如果您在所有钩子都有机会被调用之前退出渲染函数，React 会抱怨。

例如：

function BrokenFoo () {
const query = useSomeQuery();
if (query.loading) return <Loading />
// This will cause some issues because 
// it's possible that we return before our useState hook gets called
const [bar, setBar] = useState();
return <SomeComponent bar={bar} setBar={setBar} data={query.data} />
}

要修复：

function FixedFoo () {
// This will be fine because 
// all of the hooks have a chance to be called before a return
const query = useSomeQuery();
const [bar, setBar] = useState();
if (query.loading) return <Loading />
return <SomeComponent bar={bar} setBar={setBar} data={query.data} />
}

Answer 2

您可以将skip选项添加到第二个查询并丢失 if 条件：

const { loading: loadingOP, error: errorOP, data: dataOP } 
= useQuery(Q_GET_OP, { variables: { o }, skip: !o  })

从文档中：If skip is true, the query will be skipped entirely