使用 React Query 处理关系

Question

是否有任何预先存在的库可以帮助使用 React 查询处理关系数据？例如，假设我有一个名为“Person”的后端模型

type Person = {
  id: string;
  age: number;
  name: string;
  ...
  addresses?: Address[];
  cards?: Card[];
}

即Person与Address和Card模型都是一对多关系；

当我向 Person 的后端进行网络调用时，我可以询问是否要“包含”关系。因此，例如，在第 X 页上，我可以要求与人员一起发回“地址”，而在第 y 页上，我可以要求“卡片”。

如果我只使用

queryKey: ['person', <person.id>]

作为我的密钥，那么页面 X 和 Y 上的数据是不同的。如果我添加 STALE_TIME 并且不允许重新获取（除非过时），那么永远不会在页面 Y 上获取正确的数据。

我来自 Ember JS，它在内部处理这个问题。因此，当我在第 X 页上获取具有地址的 Person 时，它会自动使用其特定数据更新 Person 模型，并更新 Address 模型（通过查看 address.id）。

有什么办法可以用 React Query 来做这样的事情吗？最坏的情况是我可以编写一个自定义函数，但想知道是否已经存在解决方案。

我无法通过简单的谷歌搜索找到

Answer 1

向查询键添加指示是否包含地址和卡片的布尔值。

queryKey: ['person', <person.id>, includeAddresses, includeCards]

在第 X 页上，将

includeAddresses

设置为 true，在第 Y 页上将

includeCards

设置为 true。然后，当用户从 X 导航到 Y 时，它将获取包括卡片在内的新数据。

为了提高用户体验，您还可以在 Y 页面查询正在进行时显示查询缓存中的占位符数据（如果已获取 X 页面数据）。显然，占位符数据将丢失卡片数据，但仍然可能有价值。请参阅文档了解更多信息。