connectDynamicWidgets for dynamic widget rendering

[rmennanov]

Hi, am looking for help regrading connectDynamicWidgets usage.

Use case: on the Algolia app exists index, the facets are dynamically configured (via Configuration -> Filtering and Faceting -> Facets & Configuration -> Filtering and Faceting -> Facet display)

And the request dynamically render filters based on configured facets on the UI.

I've looked the docs and could not get how not only attribute name and the values which is available

Can you please advise how we could achieve desired state?

[Haroenv]

What do you want to achieve which isn't possible with the default widget?

[rmennanov]

Firstly, the application is written on Angular 17 and it is relaying on custom components for rendering UI element, however to simplify the logic of applying of filter and data fetching I find out that it could be achieved using connectors (which also provide convenient API for changing if filtering logic).

And as mentioned the list attributes which are used for filtering are dynamic.

Thanks in advance

[Haroenv]

What you want to use is:

1. use connectDynamicWidgets
2. read from renderingOptions.attributesToDisplay
3. in the template / rendering, loop through those attributes
4. for each attribute, render for example a refinement list

[rmennanov]

hi, sorry, but I am not fully following you

the dependencies are following:

    "algoliasearch": "^4.23.3",
    "instantsearch.js": "^4.71.1",

I've created the service which will load data from Algolia and provide expose signals with all required data

const searchClient = algoliasearch(
  '<app_id>',
  '<search_key>'
);

@Injectable({
  providedIn: 'root',
})
export class InstantSearchService {
  private instantSearchInstance: InstantSearch;

  public hits = signal<Hit[]>([]);
  public filters = signal<Map<string, any>>(new Map());

  constructor() {
    this.instantSearchInstance = new InstantSearch({
      searchClient,
      indexName: '<index_name>',
    });

    this.instantSearchInstance.start();

    this.instantSearchInstance.addWidgets([
      connectHits((params) => {
        console.log(`connectHits`, params);
        this.hits.set(params.hits);
      })({}),
      connectPagination((param) => {
        console.log(`connectPagination`, param);
      })({}),
      connectStats((params) => {
        console.log(`connectStats`, params);
      })({}),
      connectDynamicWidgets((params) => {
        console.log(`connectDynamicWidgets`, params);
      })({
        widgets: [
          connectRefinementList((params) => {
            console.log(`connectRefinementList`, params);
            const filters = this.filters();

            filters.set(params.widgetParams.attribute, params.items);

            this.filters.set(filters);
          })({ attribute: ??? }) // not clear how to set value for attribute param?
        ]
      })
    ]);
  }
}

and additionally created component which is listening on data

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [RouterLink, RouterLinkActive],
  templateUrl: './home.component.html',
})
export class HomeComponent {
  private searchService = inject(InstantSearchService);

  public hits = this.searchService.hits;
  public filters = this.searchService.filters;

  constructor() {
    effect(() => {
      console.log(`HomeComponent hits`, this.hits());
      console.log(`HomeComponent hits`, this.filters());
    });
  }
}

That usage is caused due to:

1. We are having custom Angular component for rendering hits and filters.
2. We are planning to use InstantSearch as data fetching mechanism on service layer of Angular application and it is providing convenient call-back to refine search params (change filtering option / pagination option / hierarchical menu options)

I am using the angular-instantsearch/using-instantsearch as starting point and adding some layer which is matching our needs.

Can you please correct me if there are any other way to achieve it?

[Haroenv]

If you don't know in advance which widgets can mount, you should use fallbackWidget instead of widgets (as that's meant for attributes you know in advance match a certain attribute). Then you can use the attributesToDisplay that is returned from the connector to match created widgets with ones to render and in which order.

The logic isn't entirely the same, but you can look at the react component (vue or js too) to get inspired: https://github.com/algolia/instantsearch/blob/master/packages/react-instantsearch-core/src/components/DynamicWidgets.tsx#L58

[rmennanov]

Thanks for your suggestion, tried approach with fallback widget + connectRefinementList and it seems will work in this case.

The snippet below:

connectDynamicWidgets((params) => {
  // some logic
})({
  widgets: [],
  fallbackWidget: ({ attribute }) => connectRefinementList((params => {
    // some logic
  }))({ attribute }),
})