Using filter_by and other Typesense search parameters

[furnnl]

Description

As the documentation says, it should be possible to specify additional search parameters. queryBy works, but filterBy doesn’t.

Steps to reproduce

I tried the following parameters:

additionalSearchParameters: {
queryBy: 'name',
filterBy: 'myfilter:0',
'filter_by': 'myfilter:0',
}

Expected Behavior

Filtered results

Actual Behavior

Unfiltered results

Metadata

Typsense Version:

OS:

[jasonbosco]

@furnnl The reason filterBy doesn't work when set in additionalSearchParameters is because it's overridden by InstantSearch's refinement widgets internally. So you want to manage default filters through InstantSearch's configure widget. (Also works similarly in React, Vue, Angular, etc flavors of InstantSearch).

And specifically for filters, you want to use the facetFilters key and define the filters in the format described here. The adapter will then take care of translating that into the Typesense filter format.

So in your example, you want to do something like this:

instantsearch.widgets.configure({ 
  facetFilters: ['myfilter:0']
});

Does that help?

[jasonbosco]

Closing this for now, but please feel free to re-open if you're still running into issues.

[shrugs]

Adding additional info for any react users:

const facetFilters = useMemo(() => [`myfilter:0`], [])

// ...

<Configure facetFilters={facetFilters} />

does the trick (making sure to keep the identity of that facetFilters array as constant as possible, since it'll trigger re-fetches when it changes, and providing that inline can cause an infinite fetch-render loop)

[ctorgalson]

I don't know if it's worth re-opening this but in my tests, adding a correctly-formatted facet filter to <Configure /> in React adds a property like configure: {facetFilters: ['meal:lunch']} to searchState, and adds e.g. &configure[facetFilters][0]=meal%3Alunch to the query string, but the actual query results are completely unaffected.

/shrug

[jasonbosco]

@ctorgalson Could you post the full <Configure /> line, showing the facetFilters string?

Could you also copy-as-curl the request that gets made to the Typesense server from the browser and post it?

[ctorgalson]

@jasonbosco I will, though I'll have to recreate the issue as I found an alternate solution :)

---

Adding to this thread because I didn't find it on my first ten trips through Algolia's docs: Virtual Widgets.

TL;DR: There's a way in React to provide default values without adding a "real" widget, like this (though <ClearRefinements /> will clear a refinement set this way):

<VirtualRefinementList attribute="categories" defaultRefinement="Cell Phones" />

[reinoldus]

Has anyone solved it for vue-instantsearch?

If I do: <ais-configure :filters="'my_filter:true'"> the filter is not picked up, for <ais-configure :facetFilters="['my_filter:true']"> the filter is picked up, but overwritten once I select another filter

[jasonbosco]

@reinoldus Filters need to be specified in the format mentioned here. The adapter then converts them to the Typesense filter string format internally.

the filter is picked up, but overwritten once I select another filter

This is expected behavior for the configure widget. It's only meant to set a default filter on load. If you need to enforce a filter for all searches, then you want to use the helper object that's exposed via the search function.

[krisimmig]

Hi @jasonbosco , I have tried to use the search helper you mentioned which gets injected into the searchFunction as described here. Now I want to add a default filter to all searches based on a language field we have in our typesense index so the user only sees english or german or french results. The field in the index is defined as a facet but when I try to use for example this code:

searchFunction(helper) {
  helper.addFacetRefinement("language", "de").search();
},

I get the error that the facet 'language' is not defined. It is mentioned that these facets need to be declared when initializing the helper like so:

var helper = AlgoliasearchHelper(client, indexName, {
  facets: ['nameOfTheAttribute']
});

Is there a way to use facets like that at all using the helper object? I am not sure how I can get to this using the vue version of the adapter and the instansearch-js widget set for vue.

[jasonbosco]

@krisimmig I just tried this out myself in Vue and I saw the same error you saw: "Error: X is not defined in the facets attribute of the helper configuration". Didn't find anything useful googling around. I was almost going to give up, but by some trial-and-error serendipity I found a configuration that made that error go away:

export default {
  data() {
    return {
      searchClient,
      searchParameters: {
        facets: ['language'],
      },
      searchFunction(helper) {
        helper.addFacetRefinement('language', 'de').search();
      },
    };
  },
};

Here's the full diff to get static filters working in my demo Vue app: typesense/typesense-vue-instantsearch-demo@typesense:c4d2400...typesense:7edf1bf

[krisimmig]

That´s it, awesome! :) I didn't think to find the facets param in the ais-configure widget, but it is there and like that it seems to work as expected. Thanks for your help!
For anybody else looking for something like this, here is a list of all configure options that can be used in the ais-configure widget: https://www.algolia.com/doc/api-reference/search-api-parameters/

Note: After testing this a bit more, we noticed that the load-more is not working anymore when adding facets to all searches. Not sure what is going on but we didn't have any more time to find the cause for this.
We are now using a hidden ais-toggle-refinement component to always set the language to a certain value which the user can not directly change. This works well but seems like a hack 🤷