Result Object

6 min

KlevuFetch() result object contains raw API response and handy helpers to work with the results. For example use suggestionsById() to fetch suggestions results and queriesById() for search results.

// Example search the user made
let searchTerm = "blue dress";

let searchResultProducts = [];
let suggestionResultProducts = [];
let searchNextFunc;
let searchClickManager;
let setShowMore = false;

// The Result Object is what is returned from KlevuFetch
const resultObject = await KlevuFetch(
    search(searchTerm, {
        // not required as for default it's the same.
        id: "search", 
        fields: ["name", "price", "url", "category"],
    }),
    suggestions(searchTerm, {
        // not required. as default it's the same.
        id: "suggestions", 
    })
);

queriesById() result contains metadata for query, getPage(), the result records and possible event functions for providing click events to search, category merchandising and recommendations.

const suggestionResult = resultObject.suggestionsById("suggestions"));
const searchResult = resultObject.queriesById("search"));

// array of products
suggestionResultProducts = suggestionResult.suggestions;

// array of products
searchResultProducts = searchResult.records;

// either a function or false if no more results
searchNextFunc = searchResult.getPage;

Calling these event functions returns a function to use to send events to Klevu.

Get Page Function Examples

getPage() is a nice helper to fetch the next results set or certain page of results set with the same queries and modifiers.

You can use hasNextPage() method to check if there are more pages available. Passing pageIndex parameter to getPage() allows you to fetch records for certain page.

const fetchMore = async () => {
    const nextRes = await searchNextFunc();

    const searchResult = nextRes.queriesById("search");

    searchResultProducts = searchResult?.records ?? [];
    searchNextFunc = searchResult.getPage
    setShowMore(Boolean(searchResult.hasNextPage()))
}

ReactJS SearchResultPage.tsx VueJS Home.vue

getBanners() method of searchResultQuery object can be used to fetch all banners related to that search. In case of a search we need to provide do we want banners for quicksearch or search landing page. In case of merchandising banners we do not need to provide anything for the method.

const resultObject = await KlevuFetch(
    search(searchTerm, {
        // not required as for default it's the same.
        id: "search", 
    })
);

const banners = resultObject.queriesById("search").getBanners({ searchType: "quicksearch" })

getRedirects method of searchResultQuery will be defined in case that typical search was made. It will return all directs that are matched (usually one) to the search. This allows you to create your own redirection logic.

Here is very simple logic that you can use to do the redirects in the browser.

const resultObject = await KlevuFetch(
    search(searchTerm, {
        // not required as for default it's the same.
        id: "search", 
    })
);

const redirects = resultObject.queriesById("search").getRedirect?.()
if (redirects && redirects[0]) {
  window.location.href = redirects[0].url
}

Click Events

When you perform a search using KlevuFetch, each query can be accessed using getQueriesById as shown above.

<Grid item key={i}>
    <Product
    product={p}
    onClick={() => {
        searchResult.searchClickEvent({
          productId: p.id
        })
    }}
    />
</Grid>

There are three possible click events returned by getQueriesById(): searchClickEvent(), categoryMerchandisingClickEvent() and recommendationClickEvent()

These three functions are defined and available only if query has been correct type. So for example search() query has only searchClickEvent() defined.

Function Name	Returned by
searchClickEvent()	search()
categoryMerchandisingClickEvent()	categoryMerchandising()
recommendationClickEvent()	kmcRecommendation()

For exact information regarding what is returned by searches and what to pass to these search events please refer to the Reference section.

Result Object

Get Page Function Examples

Get banners related to the search

Get redirects related to search

Click Events