Gatsby / Netlify - Instant Search results leading to "Undefined"

Can anyone able to help get the Algolia search box set up for a nonprofit side project?

Site is here: https://goodhere.org

GitHub repo is here: https://github.com/benrmatthews/goodhere…

At the moment, the instant search results are showing empty boxes and linking through to “undefined” projects (a 404 page), rather than the individual profiles of the projects.

Would be great to walk through with someone who knows what they’re doing!

The UI Demo works, so might be the front end code: https://www.algolia.com/realtime-search-demo/goodheredemo

More info in what I’ve looked into:

  • API key is correct
  • Key has access
  • One index
  • That index is live
  • Not hit the limits

Any insights welcome.

This is a great project @ben11! Nice clean design. Well done!

I see a full results object from Algolia on the client, so the bug is indeed somewhere in your front-end template.

I think your offending code is around this line:

Thanks for the reply @chad - and the kind words!

Glad the Algolia end is working well, it’s good to confirm that the error is not there.

Thanks for flagging that line 36 has the issue - can you be more specific about which part contains the error or link to documentation that will help me to resolve this?

Thanks!

@chad Also I’m wondering if this error may be caused around the predefining the searchable fields at the point the data is uploaded - how can I check this is correct?

I think you’re close!

I know the root cause was somewhere around that line because your front-end was showing undefined, e.g. /organizations/undefined. Taking a deeper look, it looks like the place to best troubleshoot might be a few lines down:
<li key={hit.objectID} className="border-b border-gray-200">

For some reason hit.objectID is not available in the component.

But we know objectID is available in the Algolia results, as we can see by pulling the results object from the console:

{
  "results": [
    {
      "hits": [
        {
          "Name": "Standard  terminology for COVID-19 lab testing",
          "objectID": "2324267002",
          "_highlightResult": {
            "Name": {
              "value": "Standard  terminology for COVID-19 lab <ais-highlight-0000000000>test</ais-highlight-0000000000>ing",
              "matchLevel": "full",
              "fullyHighlighted": false,
              "matchedWords": [
                "test"
              ]
            }
          }
        },
        // truncated
      ],
      "nbHits": 23,
      "page": 0,
      "nbPages": 3,
      "hitsPerPage": 8,
      "query": "test",
      "index": "Pages"
    }
  ]
}

So the exercise is to figure out why the hit data object isn’t making it to the component. I’m guessing the React Developer Tools will be your friend for that.

PS: I don’t see path in your Algolia object though your template is looking for it.

Hope that helps!