Using a value in the return json to specific a range of results

Hi!

I have a bunch of items in my search database, and it works great!

I would however like to put a search feature on each users’ individual pages, and only show results published by them.

In my json, I specify a “username”: “johnsmith” key-value pair, and I currently pre-fix each search with “johnsmith” recipes, “johnsmith” books, etc.

I do this unbeknownst to the searcher, where they would just search for “recipes” or “books”.

Is there a way to specific a key-value pair for each page, to do what I need more efficiently and more safely? Since if someone makes an item with “username”:“johnsmith”, the suggestions will come up with non-userspecific items.

Thanks in advance :slight_smile:

@focushero welcome to the community!

You can use a filter or a scoped API key with a filter to achieve this (scoped API key is more secure as the User cannot potentially modify the filter before the request is sent to Algolia)

Filter Documentation
Generate Secured API Key Method Documentation

Example in Javascript:

// Create a public API key with a fixed filter
const publicKey = client.generateSecuredApiKey(
  'YourSearchOnlyApiKey',
  {
    filters: 'username:johnsmith'
  }
);

Happy to help further, let us know! Thanks!

Not really sure where I’m supposed to add that code. This is my front end react code that’s working (with no filters):

const searchClient = algoliasearch('KEY', 'KEY');

function Search({}: {}): JSX.Element {
  return (
    <SearchContainer>
      <InstantSearch searchClient={searchClient} indexName="ITEM_RESULTS">
        <SearchBox />
          <AllResults />
        </InstantSearch>
    </SearchContainer>
  )
}

const AllResults = connectStateResults(({ allSearchResults }: {allSearchResults: any}) => {
  const hasResults =
    allSearchResults &&
    Object.values(allSearchResults).some((results: any) => results.nbHits > 0);

    console.log(allSearchResults);
  return !hasResults ? (
    <div>
      <div>No results in category, products or brand</div>
    </div>
  ) : (
    allSearchResults.hits.map((hit: any) => (
      <div>{hit.item.name}</div>
    ))
  );
});

Where is the filter object you provided supposed to be?

The code I sent was for the backend, ideally, you would want to generate a secured API key per User and pass this to the frontend via an initial request, and cache this key in the browser. We don’t allow you to generate a secured API key from an InstantSearch library. You don’t have to do this, it is just the most secure way because Users can modify filters in transit. If you generate a secured key, you do not have to apply a filter on the frontend since the API key will be scoped already.

To set the filters, you’ll want to use the Configure element or the useConfigure hook to set the filter. For example:

Configure element:

<Configure filters="username:johnsmith" />

useConfigure hook:

import { useConfigure } from 'react-instantsearch-hooks-web';

function CustomConfigure(props) {
  const { refine } = useConfigure(props);

  return null;
}

class TestComponent {
  const searchParameters = {
    filters: "username:johnsmith"
  }
  return (
    <CustomConfigure {...searchParameters} />
  )
}