Javascript fetchMore如何将数据返回到组件？

我试图使用React Apollo（）来遵循基于光标的分页示例，但是我的组件如何呈现原始数据来获取新的（附加的）数据却遇到了困难

这是我们获取原始数据并将其传递给组件的方式：

const { data: { comments, cursor }, loading, fetchMore } = useQuery(
    MORE_COMMENTS_QUERY
);

<Comments
      entries={comments || []}
      onLoadMore={...}
/>

据我所知，是的，一旦我的组件将调用这个

onLoadMore

函数（例如使用按钮的onClick），它将根据新光标获取数据

我的问题是。我很抱歉，如果这太简单，我不理解一些基本的东西

组件如何获取新数据？

我知道数据就在那里，因为我在控制台上记录了

newcommons

（在我的情况下，它不是newcommons，但你明白了。）我看到了新数据！但是，这些新注释如何返回到需要数据的组件？如果我再次单击按钮，它仍然会像以前一样卡在同一个光标上

---

这里缺少什么？

在

updateQuery

函数中，您可以修改（覆盖）当前查询的结果。同时，您的组件将订阅查询并将获得新结果。让我们通过以下方式来实现：

• 当您的组件第一次呈现时，组件将订阅查询并从缓存中接收查询的当前结果（如果有）。如果没有，查询将开始从GraphQL服务器获取数据，并且您的组件将收到有关加载状态的通知
• 如果查询被提取，那么一旦得到结果，组件将获取数据。现在它显示了第一个x结果。在缓存中，将为查询字段创建一个条目。这可能看起来像这样：

{
“查询”：{
“游标”：“游标1”，
“条目：{”注释：[{…}，{…}]}
}
} 
//正常化
{
“查询”：{
“游标”：“游标1”，
“条目”：参考（“条目：1”），
}
“条目：1”：{
评论：[参考（“评论：1”）、参考（“评论：2”）]，
},
“评论：1”：{…}，
“评论：2”：{…}
}

• 用户单击load more（加载更多）时，将再次获取查询，但会使用光标值。光标告诉API应该从哪个条目开始返回值。在我们的示例中，在id为

  2

  的

  Comment

  之后
• 查询结果进入，您可以使用

  updateQuery

  函数手动更新缓存中的查询结果。这里的想法是，我们希望将旧结果（列表）与新结果列表合并。我们已经获取了2条评论，现在我们想添加这两条新评论。您必须返回两个查询的组合结果。为此，我们需要更新光标值（以便我们可以再次单击“加载更多”并查看注释列表。该值将写入缓存，我们的标准化缓存现在如下所示：

{
“查询”：{
“游标”：“游标2”，
“条目：{”注释：[{…}，{…}，{…}，{…}，{…}]}
}
}
//正常化
{
“查询”：{
“游标”：“游标2”，
“条目”：参考（“条目：1”），
}
“条目：1”：{
评论：[参考（“评论：1”）、参考（“评论：2”）、参考（“评论：3”）、参考（“评论：4”）]，
},
“评论：1”：{…}，
“评论：2”：{…}，
“评论：3”：{…}，
“评论：4”：{…}
}

• 由于您的组件订阅了查询，因此它将使用缓存中的新查询结果重新提交！数据显示在UI中，因为我们合并了查询，因此组件将获得新数据，就像结果首先包含所有四条注释一样

---

这取决于您如何处理偏移量。我将尝试为您简化一个示例

这是我成功使用的简化组件：

const PlayerStats = () => {
  const { data, loading, fetchMore } = useQuery(CUMULATIVE_STATS, {
    variables: sortVars,
  })

  const players = data.GetCumulativeStats

  const loadMore = () => {
    fetchMore({
      variables: { offset: players.length },
      updateQuery: (prevResult, { fetchMoreResult }) => {
        if (!fetchMoreResult) return prevResult
        return {
          ...prevResult,
          GetCumulativeStats: [
            ...prevResult.GetCumulativeStats,
            ...fetchMoreResult.GetCumulativeStats,
          ],
        }
      },
    })
  }

我的

CUMULATIVE_STATS

查询默认返回50行。我将该结果数组的长度作为

offset

传递给我的

fetchMore

查询。因此，当我使用

fetchMore

执行

CUMULATIVE_STATS

时，查询的变量都是

sortVars

和

offset

后端的解析器处理

偏移量

，例如，如果偏移量为50，它将忽略查询的前50个结果，并从那里返回下50个结果（即第51-100行）

然后在

updateQuery

中，我有两个可用的对象：

prevResult

和

fetchMoreResult

。此时，我只需使用spread运算符组合它们。如果没有返回新结果，我将返回以前的结果

---

当我再次抓取时，

players.length

的结果从50变为100。这是我的新偏移量，下次调用

fetchMore

时将查询新数据。我知道我做错了什么。我没有返回与原始数据完全相同的形状/格式的数据。我忘记了

\u类型我

。

const PlayerStats = () => {
  const { data, loading, fetchMore } = useQuery(CUMULATIVE_STATS, {
    variables: sortVars,
  })

  const players = data.GetCumulativeStats

  const loadMore = () => {
    fetchMore({
      variables: { offset: players.length },
      updateQuery: (prevResult, { fetchMoreResult }) => {
        if (!fetchMoreResult) return prevResult
        return {
          ...prevResult,
          GetCumulativeStats: [
            ...prevResult.GetCumulativeStats,
            ...fetchMoreResult.GetCumulativeStats,
          ],
        }
      },
    })
  }