来自部分查询键匹配数据集的反应查询和占位符数据？

Question

所以，我有这样的情况：

1. 获取最初在页面加载时 returned 的 ID。让我们说“id=9”
2. 我用它查询，得到了结果。
3. return 看起来像这样：

---

queryKey is: ['guest', 9]
//return is
{
  age: 2222,
  year: 2019
}

4. 我有一个第三方脚本，我必须下载它才能获得另一个“id”。这有时需要几秒钟。

5. 我使用带有“新”id 的查询并得到结果，现在看起来像这样。

queryKey is: ['guest', 27]
{
  age: 2222,
  year: 2019
}

现在，当第二个“id”通过时，来自 useQuery 的 returned 数据是 {}，实际上是空的。因此，我的组件获取初始有效负载，显示...然后闪烁，然后“新 ID”通过并重新显示组件中发生变化的一些措辞。

所以，我有两个问题。

1. 如何使用更改后的 ID 和来自 'previous' ID 调用的“种子数据或占位符或初始数据”为我的“第二个 useQuery”播种...这样，就没有闪光灯了？

我知道你可以像文档显示的那样做，但我确实得到了那个“以前的”id 参考？ 或者我是否只需要最后一个具有部分“来宾”queryKey 的？

 placeholderData: () => {
   return queryClient
     .getQueryData(['guest', ?????])
      ?????
 },

Answer 1

keepPreviousData: true 选项就是您要找的。

另见 the docs。即使文档明确提到分页，该标志所做的只是确保当查询键更改时（例如在您的情况下使用不同的 id），而不是进入加载状态，您将从上一个查询键获取数据，查询将保持成功状态，此外，您将在结果上设置一个 isPreviousData: true 标志，以便您知道它是以前的数据。