redux 发送多个RTK查询请求以响应另一个RTK查询

4ngedf3f  于 2022-11-24  发布在  其他
关注(0)|答案(1)|浏览(173)

我是RTK查询的新手,当我从端点获取一些数据时,我得到了列表中每个ID的对象数组的响应,我必须调用另一个API来获取每个项目的详细信息。但我不知道必须实现这一点。
例如:

query: () => '/posts'; // response is ==> [{id: 21, title:'Hello world'}]

和,以获取id为21的帖子的详细信息

query: (id) => `post/${id}/detail`; // response { description:'', img:'', ... }

我需要显示所有帖子的详细信息。为此,我必须首先获得列表上的所有详细信息,然后返回查询结果,以便稍后在页面上显示。

rjjhvcjd

rjjhvcjd1#

到目前为止我想到的

import { createApi } from '@reduxjs/toolkit/query/react';
import axiosBaseQuery from 'api/axiosBaseQuery';
import axios from 'services/request';

export const postsApi = createApi({
    reducerPath: 'api/portfolio',
    baseQuery: axiosBaseQuery(),
    endpoints: (builder) => ({
        getUserPosts: builder.query({
            async queryFn() {
                // get a random user
                const postsList = await axios.get('/posts');
                if (postsList.error) return { error: postsList.error };
                // const result = await axios.get(`/market/instruments/${item.refId}/summary`);
                const endpoints = postsList.data.map((item) =>
                    axios.get(`/post/${item.id}/details`)
                );
                let error = null;
                let data = null;
                try {
                    data = await Promise.all(endpoints).then((res) => {
                        return res.map((item, index) => {
                            return { ...item.data, ...postsList.data[index] };
                        });
                    });
                } catch (err) {
                    error = err;
                }

                return data ? { data } : { error };
            }
        })
    })
});

export const { useGetUserPostsQuery } = postsApi;

相关问题