使用RTKQuery分页分块拉取数据时dispatch不生效问题求助

编写API数据拉取逻辑时，全量拉取接口响应耗时过长易触发请求超时，因此计划通过分页分块拉取规避超时问题，初始实现代码如下：

getDataWithDetails: builder.query<Data[], {size?: number; number?: number}>({
        async queryFn(_arg, _queryApi, _extraOptions, fetchWithBQ) {
            const { size, number } = _arg;

            const isFetchingFirstPage = !size && !number;

            const pageSize = size || 20;
            const pageNumber = number || 1;

            let partialResult = await fetchWithBQ({
                url: `data/details/all?page%5Bnumber%5D=${pageNumber}&page%5Bsize%5D=${pageSize}`,
                method: "GET"
            });

            let partialData = partialResult.data as {data:[], meta:[]};

            if (partialData.data.length >= pageSize) {
                const nextPage = pageNumber + 1;
                _queryApi.dispatch({ size: pageSize, number: nextPage });
            }

            return partialData.data
                ? { data: partialData.data as Data[] }
                : { error: partialResult.error as unknown as FetchBaseQueryError }

        },
        providesTags: [{type: "Data", id: "dataList"}]
    })

代码中触发下一页拉取的dispatch逻辑无法正常工作，需要排查修复。

• 无效的action入参：dispatch传入的是普通参数对象，不是RTK Query规定的请求触发action。RTK Query的query端点不会自动识别普通对象参数发起请求，必须显式调用对应端点的initiate方法生成action，dispatch后才会真正发起请求
• 缺失数据累加逻辑：现有逻辑没有做跨页数据累加，就算下一页请求触发成功，存储的请求结果也会被下一页的返回值覆盖，最终只能拿到最后一页的数据
• 分页判断逻辑缺陷：仅通过当前页返回数据长度是否等于pageSize判断是否存在下一页，未读取接口返回的总条数元数据，当最后一页数据量刚好等于pageSize时会多发一次无效空请求

如果需求是首次加载时自动拉取全量所有分页数据（规避单次全量请求超时），不需要递归dispatch触发请求，直接在queryFn内循环拉取所有分页、累加结果后一次性返回即可，逻辑更可控不会出现触发失效问题，修复后代码如下：

getDataWithDetails: builder.query<Data[], {size?: number; number?: number}>({
        async queryFn(_arg, _queryApi, _extraOptions, fetchWithBQ) {
            const { size, number } = _arg;
            const pageSize = size || 20;
            let currentPage = number || 1;
            const allData: Data[] = [];
            let hasNextPage = true;

            // 单页拉取场景（如手动跳页），直接拉取指定页返回
            if (number) {
                const pageResult = await fetchWithBQ({
                    url: `data/details/all?page%5Bnumber%5D=${currentPage}&page%5Bsize%5D=${pageSize}`,
                    method: "GET"
                });
                if (pageResult.error) return { error: pageResult.error as FetchBaseQueryError };
                const pageData = pageResult.data as { data: Data[], meta: { total: number } };
                return { data: pageData.data };
            }

            // 首页全量拉取场景，循环拉取所有页
            while (hasNextPage) {
                const pageResult = await fetchWithBQ({
                    url: `data/details/all?page%5Bnumber%5D=${currentPage}&page%5Bsize%5D=${pageSize}`,
                    method: "GET"
                });
                if (pageResult.error) {
                    return { error: pageResult.error as FetchBaseQueryError };
                }
                const pageData = pageResult.data as { data: Data[], meta: { total: number } };
                allData.push(...pageData.data);
                
                // 用总条数判断是否还有下一页，避免多余请求
                hasNextPage = allData.length < pageData.meta.total;
                currentPage++;
            }

            return { data: allData };
        },
        providesTags: [{type: "Data", id: "dataList"}]
    })

如果需求是滚动加载式的增量拉取（每次拉一页追加到列表），需要把原来的dispatch逻辑改成调用端点initiate方法生成action，同时配合serializeOptions配置保证参数变化时不会覆盖之前的缓存，也可以直接使用RTK Query提供的无限滚动query能力实现。

内容的提问来源于stack exchange，提问作者Arredgroup