Walkthrough: Making your first query

Before an application can dispatch a search request to Sitecore Search, it needs to be authenticated. The built-in setup method handles authorization success and failure. This walkthrough covers procedures from installation to handling the response of your first search query.

This walkthrough describes how to:

Install the JS Data package
Authenticate a session
Make a widget request object
Make a search request
Dispatch a search request

Install the JS Data package

Before you can begin development, you need to install the JS Data package from NPM. You can do this either directly in your IDE or using the terminal.

To install Search JS Data package to your project:

In your project, in the terminal, run the following:
RequestResponse
```
npm install --save @sitecore-search/data
```

Authenticate a session

All requests to Search must be authenticated. You can use the built-in setup method to authenticate a session.

To authenticate a session:

In a TypeScript file named index.ts, copy and paste the following code block.

RequestResponse

import {
  setup,
} from "@sitecore-search/data";

setup({
  customerKey: '<YOUR_CUSTOMER_KEY>',
  apiKey:'<YOUR_API_KEY>',
});

In the Sitecore Search user interface, in the main menu, click Developer Resources.
On the API Access tab, copy your Customer key and API key values.
In the index.ts file, in the setup function, replace <YOUR_CUSTOMER_KEY> and <YOUR_API_KEY> with the values you copied for the Customer key and the API key.

Widget specific parameters are sent to Search in WidgetRequest objects.

To make a widget request object:

In the index.ts file, to create widget request objects of widget and entity pairs, paste the following code block, then adjust the imports:

RequestResponse

import {
  setup,
  WidgetRequest,
} from "@sitecore-search/data";

const searchResultsidgetRequest = new WidgetRequest("rfkid_7");
searchResultsWidgetRequest.setEntity("content");
const previewSearchWidgetRequest = new WidgetRequest("rfkid_6");
previewSearchWidgetRequest.setEntity("content");

In the WidgetRequest objects, to set pagination parameters, paste the following code block, then adjust the imports:

RequestResponse

searchResultsWidgetRequest.setSearchLimit(10);  
searchResultsWidgetRequest.setSearchOffset(30);

previewSearchWidgetRequest.setSearchLimit(10);  
previewSearchWidgetRequest.setSearchOffset(30);

Make a search request

The Request object containing context and widget information, is sent to Search. Its parameters include those that apply to all included widgets.

To make a search request and add widget request objects:

In the index.ts file, to create a request with locale as context, paste the following code block in the file, then adjust the imports.

RequestResponse

import {
  setup,
  Request,
} from "@sitecore-search/data";

const request = new Request();
request.setContextLocaleCountry("us");
request.setContextLocaleLanguage("en");

In the request object, to add WidgetRequest objects individually, paste the following code block, then adjust the imports.
RequestResponse
```
request.addWidgetItem(searchResultsWidgetRequest.toJson());
request.addWidgetItem(previewSearchWidgetRequest.toJson());
```
Alternatively, in the request object, to add an array of WidgetRequest objects, paste the following code block, then adjust the imports.
RequestResponse
```
request.setWidgetItems( [ searchResultsWidgetRequest.toJson(), previewSearchWidgetRequest.toJson() ] );
```

Dispatch a search request

The DataProvider is a singleton that orchestrates all communication between the UI and Search.

To dispatch a search request using the DataProvider singleton:

In the index.ts file, paste the following code block, then adjust the imports.

RequestResponse

import {
  setup,
  DataProvider,
  Request,
  WidgetRequest,
} from "@sitecore-search/data";

DataProvider.get(request.toJson())
  .then((response) => console.log(JSON.stringify(response, null, 4)))
  .catch((error) => console.log(JSON.stringify(error, null, 4)));

Do you have some feedback for us?

If you have suggestions for improving this article,

Walkthrough: Making your first query

Install the JS Data package

Authenticate a session

Make a widget request object

Make a search request

Dispatch a search request