---
title: Result Object
slug: headless-sdk/result-object
docTags: 
createdAt: 2022-05-09T13:19:04.000Z
---

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

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

```javascript
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.

```javascript
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](https://github.com/klevultd/frontend-sdk/blob/master/examples/react/src/routes/SearchResultPage.tsx)
[VueJS Home.vue](https://github.com/klevultd/frontend-sdk/blob/master/examples/vue/src/views/Home.vue)

## Get banners related to the search

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

```javascript
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" })

```

## Get redirects related to search

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

```javascript
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. 

:::CodeblockTabs
React

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

Vue

```javascript
<Product
    v-for="product in searchStore.products"
    :key="product.id"
    :product="product"
    @click="searchResult.searchClickEvent({
      productId: p.id
    })"
/>
```
:::

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.&#x20;

| 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](docId:6WnQmEACtqt_Z3sacZlW_) section.&#x20;