对于的多级延迟加载数据，什么是正确的方法？

Question

最近，我一直在使用来实现具有可扩展行的多层次表结构，在这种结构中，每一行都应该在单击时执行延迟加载。它用于产品组层次结构，如下所示：

unit-1 (clicking fetches category data lazily)
  category-1 (clicking fetches product data lazily)
    product-1
    product-2
  category-2
    product-3
unit-2
  category-3
    product-4
    product-5

我有两个解决方案：

• Sub组件惰性加载示例用于React (https://react-table.tanstack.com/docs/examples/sub-components-lazy) --它只关注一个层次的深度，因此我不确定如何使其达到多层次，因为我仍然不太熟悉React，而且该示例似乎不是为此目的创建的。我尝试将其设置为多层次，但在传递(.isExpanded、.id等)

等行属性时遇到了困难。

• A通过每一行单击操作数据，以便rest由表 (https://nafeu.medium.com/lazy-loading-expandable-rows-with-react-table-cd2fc86b0630 - GitHub ex：https://github.com/nafeu/react-query-table-sandbox/blob/main/src/ReactTableExpanding.jsx)自动处理，这似乎是一种更具声明性的处理方法。(我们获取新数据，将其与现有数据合并，其余数据将被处理)，但我有一些担心，比如更新整个表数据会导致不必要的呈现。另一件事是，由于我们在这里不像第一个组件那样呈现一个子组件，所以应该安排API端点来处理click事件。这不像有一个子组件负责在挂载时获取自己的数据。

作为上面表格示例的一个注意事项，我计划使用一个API端点，其参数如下：

?level=root&id=0 (initial units list data for the table on page load)
?level=unit&id=2 (returns categories of unit-2) 
...

但是，这个逻辑似乎不足以支持行单击获取，因此，如果我遵循第二种方法，我想至少需要两个端点。

感谢您的阅读，欢迎您提出任何意见！祝您今天愉快。

Answer 1

作为一个更新，我可以让事情大部分与上面的第二个选项一起工作。作为API端点上的一个注意事项，我可以在不同的参数下使用相同的API端点和相同的钩子两次。(这部分当然是一个特定的项目，但它可能给那些有类似场景的人提供了一个想法)

为了获取表的初始数据，我将硬编码参数提供给钩子，以便在页面加载时使用initialData呈现表。

const { data: initialData, isLoading } = useGetLevels(
  {
    level: 'root',
    id: [0],
    ...
  }
 );

在第二个例子中，我使用了enabled: false，当单击一个行时，我调用refetch()，因此获取附加数据并将其与初始数据合并以更新表，并相应地扩展该行：

const {
  data: partialData,
  refetch,
} = useGetLevels(
  {
    level,
    id,
    ...
  },
  false
);

useGetLevels看起来是这样的：

function useGetLevels(
filterParams,
enabled
) {
return useQuery(
  ['levels', filterParams],
  () => fetchLevels(filterParams),
  {
    enabled,
  }
);
}