Invalid API Key error

Search Search UI React
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.