Uncaught (в обещании) Ошибка: product_categories.name не является полученным аспектом

Question

Я использую <ais-menu-select, чтобы отобразить все мои категории продуктов и отфильтровать продукты на основе этого.

Но я получил эту ошибку: Uncaught (in promise) Error: product_categories.name is not a retrieved facet.

Я уже добавил поле product_categories.name в раздел фасетов на панели инструментов.

Вот мой код:

<template>
    <ais-instant-search
            :search-client="searchClient"
            index-name="products"
            class="relative">
        <ais-search-box>
            <div slot-scope="{ currentRefinement, isSearchStalled, refine }" class="m-0 flex">
                <!--                <span :hidden="!isSearchStalled">Loading...</span>-->
                <div class="relative w-full">
                    <input type="search"
                           class="w-full text-black p-2 border-l border-t border-b border-gray-300 text-base rounded-l"
                           placeholder="Enter a product name..."
                           v-model="currentRefinement"
                           @input="refine($event.currentTarget.value)">
                        <ais-state-results>
                            <p slot-scope="{ query, hits }" v-if="!hits.length" class="absolute top-100 z-50 bg-white text-black w-full p-2 border-4 border-blue border-t-0 max-h-450px overflow-y-auto">
Not found: <q>{{ query }}</q>
                            </p>
                            <template v-else slot-scope="{ query }">
                                <ais-hits v-if="query.length > 0" class="absolute top-100 z-50 bg-white text-black w-full p-2 border-4 border-blue border-t-0 max-h-450px overflow-y-auto">
                                    <template slot="item"
                                              slot-scope="{ item }"
                                    >
                                        <div class="w-full">
                                            <div class="flex flex-wrap mb-2">
                                                <div class="relative w-64px h-64px">
                                                    <a :href="getUrl(item)"
                                                       class="block w-64px h-64px">
                                                        <img :src="getFeaturedImage(item.media)" class="max-w-full h-auto mx-auto" :alt="item.name"/>
                                                    </a>
                                                </div>
                                                <div class="flex flex-1 flex-col ml-2">
                                                    <h3 class="mb-1 text-base ">
                                                        <a :href="getUrl(item)" class="block hover:text-blue cursor-pointer">
                                                            <ais-highlight
                                                                    :hit="item"
                                                                    attribute="name"
                                                            />
                                                        </a>
                                                    </h3>
                                                    <div>
                                                        <span class="text-blue text-base font-bold">{{ item.price | toCurrency }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </template>
                                </ais-hits>
                                <div v-else />
                            </template>
                        </ais-state-results>
                </div>
                <ais-menu-select attribute="product_categories.name" class="bg-white text-black">
                    <select slot-scope="{ items, canRefine, refine }"
                            :disabled="!canRefine"
                            @change="refine($event.currentTarget.value)"
                            class="text-black border-0 h-full"
                    >
                        <option value="">All Categories</option>
                        <option
                                v-for="item in items"
                                :key="item.value"
                                :value="item.value"
                                :selected="item.isRefined"
                        >
                            {{ item.label }} ({{ item.count }})
                        </option>
                    </select>
                </ais-menu-select>

                <button class="btn btn-gray rounded-l-none px-4">Search</button>
            </div>
        </ais-search-box>
    </ais-instant-search>
</template>