Configure Related Items always returns the first items in the index

I am working on a React application and I want to show a related items section. I have built the index and I can see it has values on Algolia dashboard. But the hits retrieved from ExperimentalConfigureRelatedItems are always the same regardless of the reference hit. And the results are the first items in the index. What’s wrong with my setup?

Here is the code I used for the related items section:


import { ExperimentalConfigureRelatedItems, Hits, Index, InstantSearch} from 'react-instantsearch-dom'
import algoliasearch from 'algoliasearch/lite'
import { client } from './algolia.json'

const searchClient = algoliasearch(client.AppId, client.SearchKey)

const Hit = ({ hit }) => <p>{hit.title}</p>

export default ({ post }) => {
  const refHit = {
    //these are the same properies stored in the index
    title: post.title,
    excerpt: post.body,
  }

  return (
      <InstantSearch indexName="RecommendedPosts" searchClient={searchClient}>
        <Index indexName="RecommendedPosts">
          <ExperimentalConfigureRelatedItems
            hit={refHit}
            matchingPatterns={{
              title: { score: 2 },
              excerpt: { score: 1 },
            }}
          />
          <Hits hitComponent={Hit} />
        </Index>
      </InstantSearch>
  )
}

Version Used:
react-instantsearch-dom: 6.8.1
algoliasearch: 4.5.1

Could somebody help me figure out whats wrong please?

Hi @ahmed,
When you pass refHit to ExperimentalConfigureRelatedItems, refHit.objectID is supposed to be used internally to find out related hits.
It seems you’re missing objectID in refHit object. Can you fill it and try again? :slight_smile:

Here’s an example for you. You can see it action.
Let me know if you have any question!

Hi @eunjae.lee , thank you for your support.

I don’t have objectID value available in the current context.

To give you a background on my scenario. It is a blog-style website built with Gatsby and Contentful as a backend. At the build time, I index all the posts to Algolia. And Gatsby creates a page for each post.
At run time, When the user lands on a page (post), I would like to show him related posts to the currently selected post. At this time, I have its slug (which is a unique property on Algolia index) but I don’t have ObjectID in this context.

Any thoughts on how can I implement ExperimentalConfigureRelatedItems in such a scenario?

Appreciate your help.

@eunjae.lee, just for testing purpose, I tried to add a static title and objectID in the code but the retrieved related items are also not related to the given objectID, they are the first page in the index on Algolia and the same list always returned regardless of the given objectID.

Here is the code:


export default ({ post }) => {
  const refHit = {
    title: '3 Clever Ways To Invest At These Historic Lows',
    objectID: '4030176000',
  }

  return (
      <InstantSearch indexName="RecomendedPosts" searchClient={searchClient}>
        <Index indexName="RecomendedPosts">
          <ExperimentalConfigureRelatedItems
            hit={refHit}
            matchingPatterns={{
              title: { score: 1 },
            }}
          />
          <Hits hitComponent={Hit} />
        </Index>
      </InstantSearch>
  )
}

Hi Ahmed,

The refHit that you pass only contains a title, which doesn’t seem to be a facet filter. This results in not giving any filters to the widget, thus returning the first hit of the index.

The ConfigureRelatedItems widget works out of the box with facets, and you need to use transformSearchParameters to pass optionalWords to Algolia based on your title.

<ExperimentalConfigureRelatedItems
  // ...
  transformSearchParameters={searchParameters => {
    return {
      ...searchParameters,
      optionalWords: refHit.title.split(' '),
    };
  }}
/>

You can find more information about transformSearchParameters in our docs.

Hi @francoischalifour,

Thank you for your support and I am sorry for my late response.

I have configured the index to make the title a searchable facet (also tried filter only and not searchable). And I added the transformSearchParameters snippet you provided.

The hits retrieved by ExperimentalConfigureRelatedItems are the hit of the given title plus the first page of the index. It doesn’t seem to search using the title or retrieve the related items of the given hit.

Any thoughts on what’s wrong with my setup? Is there anything I can do to help you troubleshoot the issue?

Is there any working sample code for the ExperimentalConfigureRelatedItems using React which I can refer to?

export default ({ title }) => {
  const refHit = {
    title,
  }

  return (
    <div>
      <InstantSearch indexName="RecomendedPosts" searchClient={searchClient}>
        <ExperimentalConfigureRelatedItems
          hit={refHit}
          matchingPatterns={{
            title: { score: 10 },
          }}
          transformSearchParameters={searchParameters => {
            return {
              ...searchParameters,
              optionalWords: refHit.title.split(' '),
            }
          }}
        />
        <Hits hitComponent={Hit} />
      </InstantSearch>
    </div>
  )
}

there’s some example code here: https://github.com/algolia/react-instantsearch/blob/master/stories/ConfigureRelatedItems.stories.tsx @ahmed

Thank you, @haroen.

I have checked the sample code. I still cannot figure out what’s wrong with my code. I believe I am doing the same as in the sample code, yet it doesn’t work for me.

Would you be able to provide a code sandbox of what you are doing that way we can see what might be happening with your code. Here is a sample template that should help get you started.

Or you can build off of the one that Eunjae has provided previously.

Thank you, @jordan.kasper. I will provide a sandbox soon.