Invalid API Key error

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:[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?

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:

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 {
} from "@yext/search-headless-react";

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

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

 // other code...

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


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?

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 {
} 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 {
  Matcher, // new import
} from "@yext/search-headless-react";

const MyComponent = () => {
  React.useEffect(() => {
        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,
  }, []);

// 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.

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