Algolia React Autocomplete Creating a custom renderer

Open Q&A
1

Hey so I’m trying to make a custom Autocomplete render with algolia in react. I’m following this guide: Creating a custom renderer | Autocomplete | Algolia

So far so good, it works with their searchClient and Index, but when I change to my own index its not showing any results. Here is my code and I thnik the problem is with the sourceId do I need to change that?

const searchClient = algoliasearch(
'latency', // I have changed this to my key
'6be0576ff61c053d5f9a3225e2a90f76' // I have changed this to my apikey
);

export function TestAutocomplete({props, ...autocompleteProps}) {
// (1) Create a React state.
const [autocompleteState, setAutocompleteState] = useState({isOpen: false});
const autocomplete = useMemo(
    () =>
        createAutocomplete({
            ...autocompleteProps,
            onSubmit({ state }) {
                setAutocompleteState(state);
                console.log('Submitted query:', state.query);
            },

            getSources() {
                return [
                    // (3) Use an Algolia index source.
                    {
                        sourceId: 'products', //should i change this? 
                        // getItemInputValue({ item }) {
                        //  return item.hits;
                        // },
                        getItems({ query }) {
                            return getAlgoliaResults({
                                searchClient,
                                queries: [
                                    {
                                        indexName: 'b2b_commerce_test', // I have changed this my index
                                        query,
                                        params: {
                                            hitsPerPage: 4,
                                            highlightPreTag: '<mark>',
                                            highlightPostTag: '</mark>',
                                        },
                                    },
                                ],
                            });
                        },
                        getItemUrl({ item }) {
                            return item.url;
                        },
                    },
                ];
            },
            ...props,
        }),
    [props]
);

This is how my algolia b2b_commerce_test objects look likes: So as you can see most of my information about the product is inside the “fields” attribute. How do I hit that nested fields.name in my autocomplete code?

{
  "visible_by": [
    "0017R00002vMyIaQAK",
    "0017R00002pKDDwQAO",
    "0017R00002vNr7VQAS"
  ],
  "price": 335,
  "image": "https://res.cloudinary.com/dtdvgntkq/image/upload/v1685689515/products/WF-001_dltflk.png",
  "id": "01t7R00000A0h8gQAB",
  "fields": {
    "attributes": {
      "type": "Product2",
      "url": "/services/data/v58.0/sobjects/Product2/01t7R00000A0h8gQAB"
    },
    "Id": "01t7R00000A0h8gQAB",
    "Name": "Wolf",
    "ProductCode": "WF-001",
    "Description": "Often depicted as a fierce and cunning villain, the wolf's pack mentality and hunting skills make it a popular choice for movies.",
    "IsActive": true,
    "CreatedDate": "2023-05-18T07:19:44.000+0000",
    "CreatedById": "0057R00000CfYquQAF",
    "LastModifiedDate": "2023-05-21T11:55:36.000+0000",
    "LastModifiedById": "0057R00000CfYquQAF",
    "SystemModstamp": "2023-05-21T11:55:36.000+0000",
    "Family": "Canidae",
    "CurrencyIsoCode": "EUR",
    "IsDeleted": false,
    "IsArchived": false,
    "LastViewedDate": "2023-06-05T07:17:14.000+0000",
    "LastReferencedDate": "2023-06-05T07:17:14.000+0000",
    "StockKeepingUnit": "WF-001",
    "ProductClass": "Simple",
    "Weight__c": "100 lb"
  },
  "objectID": "WF-001"

After this gets to work, I want to implement th createQuerySuggestionsPlugin, how can I implement this code into my TestAutocomplete.


const querySuggestionsPlugin = createQuerySuggestionsPlugin({
            indexName: process.env.NEXT_PUBLIC_ALGOLIA_INSTANTSEARCH_QUERY_SUGGESTIONS_INDEX_NAME,
            searchClient,
            categoryAttribute: [
                'instant_search',
                'facets',
                'exact_matches',
                'categories',
            ],
            transformSource({ source }) {
               console.log("source", source)
                return {
                    ...source,
                    onSelect({ item }) {
                        setIndexUiState((indexUiState) => ({
                            ...indexUiState,
                            query: item.query,
                            menu: {
                                categories: item.__autocomplete_qsCategory || '',
                            },
                        }));
                    },
                };
            },
        });