如何让ais-infinite-hits的loadMore返回固定数量的过滤后结果？

核心问题分析 #

你当前的问题是在前端获取Algolia返回的结果后再做过滤，导致每次加载的10条原始结果中，符合url.includes('test')的数量不稳定，最终显示的有效结果数时多时少。最优解决思路是让Algolia服务器直接返回符合条件的结果，避免前端二次过滤。

推荐方案：后端过滤（最优） #

通过Algolia的内置过滤功能，让服务器直接返回url包含test的结果，这样每次loadMore都会返回稳定的10条符合条件的数据。

步骤1：配置Algolia后台

登录Algolia控制台，找到你的索引：

• 进入Configuration → Attributes for faceting
• 添加url字段，选择Filter only（仅用于过滤），保存设置。

步骤2：修改前端代码

删掉前端的过滤函数，在ais-configure中添加过滤参数：

<script setup>
import { ref, provide } from 'vue';
import algoliasearch from 'algoliasearch/lite';

// 移除原有的filterPosts函数
</script>

<template>
    <ais-instant-search>
        <!-- 配置每页10条结果，同时添加过滤器让服务器返回url包含test的内容 -->
        <ais-configure 
            :hits-per-page.camel="10" 
            :filters="`url:*test*`"
        />
        <ais-infinite-hits>
            <template #item="{ item }">
                <!-- 你的item渲染逻辑 -->
                …
            </template>
            <template #loadMore="{ isLastPage, refineNext }">
                <div :class="{ hidden: isLastPage }">
                    <button
                        :disabled="isLastPage"
                        @click="refineNext"
                    >
                        See more
                    </button>
                </div>
            </template>
        </ais-infinite-hits>
    </ais-instant-search>
</template>

说明

• filters="url:*test*" 使用了Algolia的包含匹配语法，*是通配符，匹配任意字符。
• 这样设置后，每次点击加载更多，Algolia都会直接返回10条符合url包含test的结果，前端无需再过滤，显示数量完全稳定。

备选方案：前端手动凑数（仅特殊场景使用） #

如果因为某些限制无法在后端过滤，可以手动管理加载逻辑，直到收集到足够的符合条件的结果。但这种方法会增加额外请求，效率较低，不推荐作为首选。

<script setup>
import { ref } from 'vue';
import algoliasearch from 'algoliasearch/lite';

const targetPerLoad = 10; // 每次要加载的有效结果数
const filteredHits = ref([]); // 存储最终要显示的结果
let rawResults = null; // 存储Algolia返回的原始结果
let isLoading = false;

// 过滤函数
const filterPosts = (items) => {
    return items.filter(item => item.url.includes('test'));
};

// 自定义加载更多逻辑
const loadMore = async (refineNext) => {
    if (isLoading || (rawResults && rawResults.isLastPage)) return;
    isLoading = true;

    // 调用Algolia的加载下一页方法
    await refineNext();
    // 过滤新获取的原始结果
    const newValidHits = filterPosts(rawResults.hits);
    // 添加到结果数组
    filteredHits.value = [...filteredHits.value, ...newValidHits];

    // 如果新增的有效结果不够目标数，继续加载下一页
    if (newValidHits.length < targetPerLoad && !rawResults.isLastPage) {
        await loadMore(refineNext);
    }
    isLoading = false;
};
</script>

<template>
    <ais-instant-search>
        <!-- 可以把每页原始结果数设大一点，减少请求次数 -->
        <ais-configure :hits-per-page.camel="20" />
        <ais-infinite-hits @results="rawResults = $event">
            <template #default>
                <!-- 直接渲染我们维护的filteredHits数组 -->
                <div v-for="item in filteredHits" :key="item.objectID">
                    <!-- 你的item渲染逻辑 -->
                    …
                </div>
            </template>
            <template #loadMore="{ isLastPage, refineNext }">
                <div :class="{ hidden: isLastPage }">
                    <button
                        :disabled="isLoading || isLastPage"
                        @click="loadMore(refineNext)"
                    >
                        See more
                    </button>
                </div>
            </template>
        </ais-infinite-hits>
    </ais-instant-search>
</template>

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