时间戳

首页 > 解决方案 > 链接查询树，不带“渲染的钩子比上一次渲染时更多”

javascript - 链接查询树，不带“渲染的钩子比上一次渲染时更多”

问题描述

这是一个使用 rest 链接的 apollo 客户端。我有 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 效果。像阿波罗这样的顺序查询的正确方法是什么？

标签： javascriptreactjsapolloreact-apollo

解决方案

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

推荐阅读