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

Question

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

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

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给我以下消息:

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

我想知道如何使用react apollo钩子来运行依赖于另一个查询的查询。如果事先知道graphql查询变量，它会非常有效。然而，我没有找到来自其他查询的变量的解决方案。

Answer 1

您可以将< code>skip选项添加到第二个查询中，并放弃if条件:

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

从文档:< code >如果skip为真，将完全跳过查询

Answer 2

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

如果您在所有钩子都有机会被调用之前退出渲染函数，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} />
}