Invalid API Key error

Search Search UI React
1

Hi, I’m working on a Pages react project. On the location page template the customer wants a section showing near by locations (to the one currently being viewed). I’m not sure if there’s a better/easier way, but I’m trying to use the Live API and pass the $near filter as explained on this page: Vertical Search | Hitchhikers
Unfortunately I keep getting an “Invalid API Key” response. The URL I’m fetching (using React.useEffect) has the following format:
https://liveapi.yext.com/v2/accounts/[xxx]/search/vertical/query?api_key=[xxx]&v=20230320&experienceKey=[xxx]&verticalKey=locations&locale=en_GB&filters= {%22builtin.location%22:{%22$near%22:{%22lat%22:[xxx],%22lng%22:[xxx],%22radius%22:10}}}
Can you tell me what I’m doing wrong?

2

Hi Andrea,

Where are you getting your API key from? The correct Search API key is found in the platform by clicking Search > [your Search Experience] > Experience Details. You will see this screen and can copy the api_key and experienceKey found here:

image
image2256×1344 184 KB

Also, I would recommend using Search UI React for interfacing with the Yext Search API in a React project. This should save you from having to write as much code and make the API easier to work with. Your code might look something like:

import {
  useSearchActions
} from "@yext/search-headless-react";

const MyComponent = () => {
  const searchActions = useSearchActions();

  useEffect(() => { 
      searchActions.setVertical("locations");
      searchActions.setLocationRadius(10000); // distance in meters
      searchActions.executeVerticalSearch(
  }. []);

 // other code...
}

Let me know if there is anything else I can help you with.

Aaron

3

Hi Aaron, thank you for looking into this and the proposed solution. Yes, that’s where I get my API key and experience key.
I’m not sure the solution you propose is suitable for this. There is no customer facing search happening here. I just need to retrieve a list of entities based on a certain criteria, so that I can list them on the page. Should I still use Headless Search for this?
I’m trying to implement your solution but I can seem to find a list of all available methods for useSearchActions so I can reconstruct the original query (all locations within xx meters from a specific lat & long) - could you point me in the right direction if you think this is the way to achieve what I’m trying to do?

Edit: even when using the SearchHeadlessProvider module I’m still getting Invalid API Key, even though I can see it’s using the right one in the Request URL. Is it because I’m using a sandbox environment? Or anything else I should be aware of when using the search API?

4

The Sandbox environment is why you are seeing the incorrect API keys as you need to use a different endpoint than is listed in the API docs. If you are using Search Headless, you can do this:

import {
  provideHeadless,
  SandboxEndpoints,
  SearchHeadlessProvider,
} from "@yext/search-headless-react";

const searcher = provideHeadless({
  apiKey: "YOUR API KEY"
  experienceKey: "YOUR EXPERIENCE KEY",
  locale: "en",
  endpoints: SandboxEndpoints,
  verticalKey: "locations",
});

The endpoints themselves are listed in this community post.

I personally would still use Search Headless for what you are trying to achieve. I was looking back at a project I was working on a while back and here is what I did:

  1. Set builtin.location as a staticFilter in my Search configuration as follows:
"searchableFields": {
  "builtin.entityType": {
     "nlpFilter": true,
     "staticFilter": true
    }
   // other searchable fields
}
  1. Set the coordinates as a filter with a radius:
import {
  useSearchState,
  useSearchActions,
  Matcher, // new import
} from "@yext/search-headless-react";

const MyComponent = () => {
  React.useEffect(() => {
    searchActions.setStaticFilters([
      {
        selected: true,
        displayName: "New York City, New York, NY",
        filter: {
          kind: "fieldValue",
          fieldId: "builtin.location",
          value: {
                lat: 40.7128, // NYC lat
                lng: -74.006, // NYC lng
                radius: 40233.6, // equivalent to 25 miles
          },
          matcher: Matcher.Near,
        },
      },
    ]);
    searchActions.executeVerticalQuery();
  }, []);

// other code ...

}

Here are all the methods for useSearchActions. These reference pages may also be helpful:

Of course, you are still welcome to use the API directly.

5

Hi Aaron, thank you so much for your detailed response, there’s a lot of good stuff in there that will help me along the way! :slight_smile:
I’ve implemented your solution successfully and indeed it’s much easier to use Search Headless once you know how to set it up properly.

1 Like