How to Select Sources for Sitecore Search With Next.js

When using the platform for Sitecore Search, you might encounter the need to create multiple sources. This can be caused by a multiple of reasons, here are some examples.

• Creating a source for every environment (qa, pre-production and production)
• The need to add external pages not within your sitemap or website

The problem is that the Sitecore Search documentation doesn’t really explain how we are able to filter specific sources for the results of our widgets or components. After some investigation we found some utilities that sitecore have provided that could solve the problem.

Updating your Widget to allow Specific Sources

Within our widget code we’ll see lines that involves the useSearchResults where we get our data and what we query into Sitecore Search. Here is an example of how it looks like when returning some results.

  const {
    widgetRef,
    actions: { onItemClick },
    queryResult: {
      isLoading,
      isFetching,
      data: { total_item: totalItems = 0, content: articles = [] } = {},
    },
  } = useSearchResults({
    query: (query) => {
      query.getRequest();
    },
    state: {
      itemsPerPage: defaultItemsPerPage,
      keyphrase: defaultKeyphrase,
    },
  });

The solution lies in the lines that have a function involving the query , specifically I’m talking about this section of the code.

query: (query) => {
  query.getRequest();
}

So we’ll be continuing this piece of code and introducing a function called setSource. This function’s typescript looks like this.

setSources(value: Array<string>): IWidgetItem;

This means it accepts an array of string and returns the results needed. Be careful where you will be adding it into your query. Make sure it’s added after the getRequest and if not it will complain and an error will occur. Here is an example with other functions that will manipulate the results together with the setSource .

query
  .getRequest()
  .setSearchQueryHighlightFragmentSize(500)
  .setSources([source])
  .setSearchQueryHighlightFields(['title', 'description'])
  .setSearchQueryHighlightPreTag(HIGHLIGHT_DATA.pre)
  .setSearchQueryHighlightPostTag(HIGHLIGHT_DATA.post);

This is correct, as long as you’ve placed these functions after the getRequest . The next step is what we’re passing inside the setSource function. I’ve done some discovery and got problems when I was adding in just the name of the source from the Sitecore Search Platform. The name I was using also had spaces which might have caused the issue. The safest way is using the Source ID value of the Sources Section found in Sitecore Search. Since it needs an array, you can add multiple sources to fit your need.

We then define a variable that contains the array of sources that we want to show in our component or widget. Then we pass it inside the setSources part of the code.

const sources = ['000001'];

  const {
    widgetRef,
    actions: { onItemClick },
    queryResult: {
      isLoading,
      isFetching,
      data: { total_item: totalItems = 0, content: articles = [] } = {},
    },
  } = useSearchResults({
    query: (query) => {
      query.getRequest().setSources(source);
    },
    state: {
      itemsPerPage: defaultItemsPerPage,
      keyphrase: defaultKeyphrase,
    },
  });

Why is Selecting Specific Sources Important?

When you get your credentials for Sitecore Search you will see that most of everything lives on a very flat hierarchy, meaning nothing really gets grouped together and you can actually mix and match multiple things. This as powerful as it is also puts a strain in setting up Sitecore Search to your project. Normally you would imagine that each environment would be contained separately but it works differently in Sitecore Search. Our way of solving containing the allowed results is using the Sources and specifically selecting what are whitelisted.

I look forward to writing helpful articles for anyone interested in Sitecore Search.