reactjs - 使用 RTK 查询对 ID 列表执行多个请求的最佳方法是什么？

Question

我正在尝试对 id 列表中的每个 id 执行一次 GET。

我的 api 是使用 RTK Query 定义的，我也使用 React 和 RTK Query 的钩子(Hook)。

但是我还没有得到关于如何对列表中的每个 id 执行请求的任何线索，就像我使用 http 客户端(例如 axios)使用常规函数一样。

一些我想要做的伪代码:

ids = [1, 2]
allData = [];

for(id in ids) {
 data = await api.fetchBySingleId(id);
 allData.add(data)
}

// logging
[{id: 1, ...}, [id: 2, ...}]

Answer 1

需要考虑的几个选项:

(1) 您可以创建一个使用单个 ID 查询的组件。然后，您可以映射 ID 列表并呈现这些组件的列表。如果您特别需要一个对象中的数据，这可能有用，也可能没用。

(2) 您可以在 API 切片中创建一个端点，该端点接受 ID 列表，然后使用 queryFn 属性而不是普通的 查询 手动执行 API 调用> 一。

示例:

export const yourApiSlice = createApi({
  ...,
  endpoints: (builder) => ({
    getListOfthings: builder.query({
      queryFn: (ids) => {
        const promises = ids.map((id) => {
          return someManualFetchFunction(id);
        });
        return Promise.all(promises).then((results) => {
          return { data: results }; // final result must have either the property "data" or the property "error"
        });
      },
    }),
  }),
});