Using transformData with custom widget (connectInfinteHits)

I’d like to transform some of the data from my results. I was able to do this using the out of the box infiniteHits widget but since then I’ve updated my work to use masonry and thus a custom widget.

Before I had something like:

transformData: function (item) {
    item.user.name = capitalizeFirstLetter(item.user.name);
}

But now this no longer seems to be called. Dies it need to be called somewhere in the renderFn?

const masonryInfiniteScrollHits = instantsearch.connectors.connectInfiniteHits(renderFn);

Thanks

Hi @chrishjohnstone

The transformData is an option of the widget, since you are using the connector now you have to call your transformData function directly in the renderFn

Could you share me the code of your custom widget so I can help you to do this?

Cheers, Maxime.

Hi Maxime,

Thanks for the reply.

I ended up up calling a method like this: ${this.capitalizeFirstLetter.call(this, hit.user.name)} from within my render function:

function renderFn(InfiniteHitsRenderingOptions, isFirstRendering) {
			    const {containerNode} = InfiniteHitsRenderingOptions.widgetParams;
			    InfiniteHitsRenderingOptions.widgetParams.loadMore = () => isLastPage ? null : showMore();

			    if ( isFirstRendering ) {
				   ...
			    }

			    const hits = InfiniteHitsRenderingOptions.hits;

			    containerNode.html(
				    hits.map(hit => (`
                        <div class="post-item col-xs-12 col-md-6">
                            <a href="/blog/${hit.slug}">
                                <img class="post-image" src="${hit.intro_image_url}">
                            </a>
                            <div class="post-details">
                                <div class="post-meta">
                                    <p class="post-tags">
                                        ${this.renderTags.call(this, hit.tags)}
				                    </p>
                                    <h3><a href="/blog/${hit.slug}">${hit.title}</a></h3>
                                    <p class="post-date">${this.formatDate.call(this, hit.published_at)} by <em>${this.capitalizeFirstLetter.call(this, hit.user.name)}</em></p>
                                </div>
                                <div class="post-summary text-left">

                                </div>
                            </div>
                        </div>
                        `)
			        )
		        );

			 
		    };

		    const masonryInfiniteScrollHits = instantsearch.connectors.connectInfiniteHits(renderFn);

It achieves the same thing but feels a little less elegant.

Thanks,

Chris

1 Like