链接查询树 w/o "Rendered more hooks than during the previous render"

Question

这是一个使用其余部分的 apollo 客户端 link。我有 2 个我需要点击的 API，1 个带有记录的值和 ID，另一个 api 为我提供了有关记录的更多信息。然后，我将信息拼接在一起以用于我正在呈现的内容。不...没有 gql 后端，只是想向前迈进并连接客户端。我尝试这样做的方式是使用

这样的钩子

const {data: recordsById = {}, loading: loading1} = useQuery(firstQuery, {variables: {sectionId}})
const records = Object.keys(recordsById).map((recordId) => {
  const {data} = useQuery(secondQuery, {skip: loading1, variables: {sectionId, recordId}})
  return {
    id: recordId,
    value: recordsById[recordId],
    info: data,
  }
})

很明显，当 firstQuery 以 {fooId: 'something', barId: 'else'} 之类的对象响应时，在下一个渲染中会有更多的 useQuery 效果。使用 apollo 执行这样的顺序查询的正确方法是什么？

Answer 1

您可以将第二个查询移到子组件中。当第一个查询完成后，您呈现所有子组件，然后它们可以安全地（无条件）使用第二个查询。

Answer 2

React 失败是因为在内部，它将每个 hook 调用绑定到组件和它调用的顺序，这意味着在每个组件中 hooks 调用顺序和被调用的 hooks 数量应该是常量，在你的组件中你应该摆脱在任何类型的循环中使用钩子，例如将其拆分为单独的组件

链接查询树 w/o "Rendered more hooks than during the previous render"

chaining query trees w/o "Rendered more hooks than during the previous render"

javascript

reactjs

apollo

react-apollo