比上一次渲染时渲染了更多的钩子 [英] Rendered more hooks than during the previous render

问题描述

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

How to use 2 graphql queries with react-apollo-hooks where the 2nd query depends on a parameter retrieved from the 1st query?

我尝试使用 2 个如下所示的查询:

I try to use 2 queries which looks like this:

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 } })

然而，当我运行我的项目时，react-hooks 给我以下信息:

However, when I run my project, react-hooks gives me the following message:

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

"index.js:1437 Warning: React has detected a change in the order of Hooks called by Upgrade. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks"

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

I would like to know how I can use react-apollo-hooks in order to run a query that depends on another query. It works great if the graphql query variables are known in advance. However, I did not find a solution for variables that come from other query.

推荐答案

您可以在第二个查询中添加 skip 选项并丢失 if 条件:

You can add the skip option to the second query and lose the if condition:

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

来自文档:如果skip为真，查询将被完全跳过

这篇关于比上一次渲染时渲染了更多的钩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！