How to populate refinementList widget when hits come from a custom API endpoint

I have set up a “proxy” as explained here: Conditional Requests | InstantSearch.js | Building Search UI | Guide | Algolia Documentation to return a custom list of results from my API, instead of Algolia’s servers, when the search query is empty. The custom results show up nicely inside InstantSearch’s UI, and as soon as the user types a query, the search client switches to retrieve results from Algolia. All this works great.

My problem is that the refinement list (working great with Algolia results) remains empty when the results come from my back-end.

Is there something I’m missing? Is there a way to manually populate the refinement list with some data from my back-end?

Thanks in advance for any help!

PS - my code is attached in the 1st reply

import algoliasearch from 'algoliasearch/lite';
import instantsearch from 'instantsearch.js';
import { searchBox, refinementList, infiniteHits, configure } from 'instantsearch.js/es/widgets';

const axios = require('axios').default;

const algoliaClient = algoliasearch( algolia_credentials.app_id, algolia_credentials.api_key );

async function retrieveDefaultResults(catId, page = 0) {
	return axios
	.then(response => {
		return => {
			const temp = document.createElement('p');
			temp.innerHTML = entry.excerpt.rendered;
			return {
				title: entry.title,
				excerpt: temp.textContent,
				content: null,
				tags: entry.tags_names,
				categories: entry.categories_names,
				thumbnail: entry.thumb_url
	.catch(err =>{

const searchClient = {
	search(requests) {
		// If the query is blank, get the default results for category from Wordpress backend instead of querying Algolia
		if (requests.every(({ params }) => !params.query)) {
			let nextPage = requests[0] + 1;
			return retrieveDefaultResults(, nextPage).then(defaultsHits => {
				return Promise.resolve({
					results: => ({
						hits: defaultsHits,
						nbHits: defaultsHits.length,

const search = instantsearch( {
	indexName: 'post_index',
} );

window.addEventListener( 'DOMContentLoaded', ( ) => {
	search.addWidgets( [
		configure( {
			filters: `categories.term_id:${ }`,
		} ),
		searchBox( {
			container: '#searchbox',
			placeholder: 'Rechercher dans cette catégorie...',
			showSubmit: false,
			showReset: false,
			cssClasses: {
				input: 'block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm',
		} ),
		refinementList( {
			container: '#tags-list',
			attribute: '',
			cssClasses: {
				checkbox: 'h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500',
				label: 'ml-3 text-sm text-gray-600',
				count: 'hidden',
		} ),
		infiniteHits( {
			container: '#hits',
			cssClasses: {
				root: 'post-grid',
				list: [ 'thumbslist' ],
				item: 'thumbitem',
				loadMore: 'w-full flex justify-center mb-6',
				disabledLoadMore: 'hidden'
			templates: {
				showMoreText: `
				<button class="'inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none'">Résultats suivants</button>
				item: `
				<a href="#" class="block hover:bg-gray-50">
				<div class="flex items-center px-4 py-4 sm:px-6">
				<div class="min-w-0 flex-1 flex items-center items-start">
				<div class="flex-shrink-0 lg:w-64 w-20">
				<a href="{{ url }}"><img class="search-thumbnail" src="{{ thumbnail }}" alt="{{ title}}"/></a>
				<div class="ml-4 self-start">
				<p class="text-sm font-medium text-indigo-600 truncate">
				<a href="{{ url }}"> {{#helpers.highlight}} { "attribute": "title", "highlightedTagName": "mark" } {{/helpers.highlight}} </a>
				<p class="text-sm text-gray-900">
				{{ excerpt }} </p>
				<p class="mt-2 flex text-sm self-end">
				<span class="inline-flex items-center px-2.5 mr-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">{{ name }}</span> {{/tags}}
				<a href="{{ url }}">
				<svg class="h-5 w-5 text-gray-400" xmlns="" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
				<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
		} ),
	] );
} );