RTK查询数据树结构

Question

我正在研究具有数据树结构的选择。

为了更好地理解，想象一下：

端点

/products_categories

返回：

[
  {
    id: 56,
    name: "Furniture",
    is_leaf: false,
  },
  ...
]

“用户选择‘家具’，它会显示另一个选择并引发另一个 api 调用。”

端点

/products_categories?parent=56

返回：

[
  {
    id: 80,
    name: "Garden furniture",
    is_leaf: false,
  },
  ...
]

端点

/products_categories?parent=80

返回：

[
  {
    id: 250,
    name: "Garden table",
    is_leaf: true,
  },
  ...
]

我正在使用 RTK 查询钩子，就像这样

const { data } = useGetProductCategoriesQuery({ parentId })

数据仅包含当前数据，但不包含先前（父）数据。我认为我应该手动引入 redux 存储/缓存。文档中是否有类似场景或特定位置的示例，如何操作？

Answer 1

那么，您可以使用

useQueries

钩子

https://tanstack.com/query/latest/docs/framework/react/reference/useQueries

你可以尝试类似的事情

const [selectedIds, setSelectedIds] = useState([]);

const onSelectProduct = (productId) => setSelectedIds(value => [...value, productId]);

const results = useQueries({
  queries: selectedIds.map(id => (
    { queryKey: ['product', id], queryFn: () => fetchProduct(id), staleTime: Infinity }
  )),
});

每个结果都会有一个

data

键以及相关记录。