---

title: QueryPreview

---

# QueryPreview

Retrieves a preview of the results of a query and exposes them in the default slot,
along with the query preview and the totalResults of the search request.
By default, it renders the names of the results.

## Props

| Name                          | Description                                                                                                                                                                                                  | Type                          | Default            |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------- | ------------------ |
| <code>queryPreviewInfo</code> | The information about the request of the query preview.                                                                                                                                                      | <code>QueryPreviewInfo</code> | <code></code>      |
| <code>queryFeature</code>     | The origin property for the request.                                                                                                                                                                         | <code>QueryFeature</code>     | <code></code>      |
| <code>maxItemsToRender</code> | Number of query preview results to be rendered.                                                                                                                                                              | <code>number</code>           | <code></code>      |
| <code>loadWhenVisible</code>  | Controls whether the query preview requests should be triggered when the component is visible in the viewport.                                                                                               | <code>boolean</code>          | <code>false</code> |
| <code>debounceTimeMs</code>   | Debounce time in milliseconds for triggering the search requests.<br />It will default to 0 to fit the most common use case (pre-search),<br />and it would work properly with a 250 value inside empathize. | <code>number</code>           | <code>0</code>     |
| <code>persistInCache</code>   | Controls whether the QueryPreview should be removed from the state<br />when the component is destroyed.                                                                                                     | <code>boolean</code>          | <code>false</code> |

## Events

| Event name | Properties | Description |
| ---------- | ---------- | ----------- |
| load       |            |
| error      |            |

## Slots

| Name                | Description                | Bindings<br />(name - type - description)               |
| ------------------- | -------------------------- | ------------------------------------------------------- |
| <code>result</code> | Query Preview result slot. | **result** <code>Result</code> - A Query Preview result |

## Events

A list of events that the component will emit:

- [`QueryPreviewRequestUpdated`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted when the component is mounted and when the properties of the request object
  changes. The event payload is the `queryPreviewRequest` object.

## Vue Events

A list of vue events that the component will emit:

- `load`: the event is emitted when the query results have been loaded.
- `error`: the event is emitted if there is some error when retrieving the query results.

## See it in action

Here you have a basic example of how the QueryPreview is rendered. Keep in mind that this component
is intended to be used overriding its default slot. By default it will only render the names of the
results.

```vue live
<template>
  <QueryPreview :queryPreviewInfo="queryPreviewInfo" />
</template>

<script setup>
import { QueryPreview } from "@empathyco/x-components/queries-preview";
import { reactive } from "vue";
const queryPreviewInfo = reactive({ query: "sandals" });
</script>
```

### Play with the default slot

In this example, the results will be rendered inside a sliding panel.

```vue live
<template>
  <QueryPreview
    :queryPreviewInfo="queryPreviewInfo"
    #default="{ totalResults, results }"
  >
    <section>
      <p>Total results: {{ totalResults }}</p>
      <SlidingPanel :resetOnContentChange="false">
        <article
          v-for="result in results"
          :key="result.id"
          class="x-result"
          style="max-width: 300px; overflow: hidden"
        >
          <BaseResultLink :result="result">
            <BaseResultImage :result="result" class="x-result__picture" />
          </BaseResultLink>
          <div class="x-result__description">
            <BaseResultLink :result="result">
              <h1 class="x-title3">{{ result.name }}</h1>
            </BaseResultLink>
          </div>
        </article>
      </SlidingPanel>
    </section>
  </QueryPreview>
</template>

<script setup>
import { QueryPreview } from "@empathyco/x-components/queries-preview";
import {
  BaseResultImage,
  BaseResultLink,
  SlidingPanel,
} from "@empathyco/x-components";
import { reactive } from "vue";
const queryPreviewInfo = reactive({ query: "flip-flops" });
</script>
```

### Play with the result slot

The component exposes a slot to override the result content, without modifying the list.

In this example, the ID of the results will be rendered along with the name.

```vue
<template>
  <QueryPreview :queryPreviewInfo="queryPreviewInfo" #result="{ result }">
    <span>{{ result.id }}</span>
    <span>{{ result.name }}</span>
  </QueryPreview>
</template>

<script setup>
import { QueryPreview } from "@empathyco/x-components/queries-preview";
import { reactive } from "vue";
const queryPreviewInfo = reactive({ query: "flip-flops" });
</script>
```

### Play with props

In this example, the query preview has been limited to render a maximum of 4 results.

```vue
<template>
  <QueryPreview
    :maxItemsToRender="maxItemsToRender"
    :queryPreviewInfo="queryPreviewInfo"
    #default="{ results }"
  >
    <BaseGrid #default="{ item }" :items="results">
      <BaseResultLink :result="item">
        <BaseResultImage :result="item" />
      </BaseResultLink>
    </BaseGrid>
  </QueryPreview>
</template>

<script setup>
import {
  BaseGrid,
  BaseResultImage,
  BaseResultLink,
} from "@empathyco/x-components";
import { QueryPreview } from "@empathyco/x-components/queries-preview";
import { reactive } from "vue";
const maxItemsToRender = 4;
const queryPreviewInfo = reactive({ query: "flip-flops" });
</script>
```