Nested Attributes as Refinements in Vue-InstantSearch Comps with Nuxt

I’m working on getting some nested attributes to show up in the selection of the refinements. Currently attaching the keys for the attributes to userData and then calling those into the index on page the vue mounted life cycle hook.


mounted() {
const index = this.searchClient.initIndex(this.indexName);
index.getSettings().then(response => {
this.features = Object.values(response.userData).sort(this.sortByNameAsc);
});
}

Unfortunately, this method blocks page load because we have about 800 nested attributes.

We’ve taken some time to drop the possible number down to 300 but I’m wondering what steps I can take to improve performance overall here or if having anything over N nested attributes as searchable is not recommended.

Things I’ve looked at:

This link makes me think that I might need to register all the nested attributes individually although I’m not sure that would solve anything in terms of load-in on the frontend: Creating and Using Nested Attributes | How to | Sending and Managing Data | Guide | Algolia Documentation

AisConfigure: ais-configure | Vue InstantSearch | API parameters | API Reference | Algolia Documentation seem to be able to load in attributes on first load but then the disappear later on… I guess this makes sense if the attributes are not present on the current search terms, but on load with all items all the nested attributes should be present as refinements

attributesToRetrieve seems to be another possibility: Get Objects | Indexing | Method | API Reference | Algolia Documentation but not exactly sure where to set that up in the current implementation as algolia search client is being passed into the root as a mixin.

Wondering what the best option is here or if maybe I’m looking at this problem in the wrong way.

Cheers

Update Jul 22 14:28:58 2021

Ok <AisConfigure :hits-per-page.camel="100" :attributesToRetrieve="['*']" /> seems to fill in state.disjunctiveFacets in <AisStateResults/>

But I can’t access disjunctive facets in the nested comp, assuming because of this:
Hydration fails when VueInstantsearch components are within a wrapper component · Issue #959 · algolia/vue-instantsearch · GitHub

Maybe I need to strip out the comp from the library and build my own refinement comp?