---

title: QueryPreviewList

---

# QueryPreviewList

Renders the results previews of a list of objects with the information about the query preview,
and exposes the QueryPreview slots to modify the content.
The requests are made in sequential order.

## Props

| Name                            | Description                                                                                                                                                                                                                                   | Type                            | Default            |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ------------------ |
| <code>queriesPreviewInfo</code> | The list of queries preview to render.                                                                                                                                                                                                        | <code>QueryPreviewInfo[]</code> | <code></code>      |
| <code>queryFeature</code>       | The origin property for the request on each query preview.                                                                                                                                                                                    | <code>QueryFeature</code>       | <code></code>      |
| <code>maxItemsToRender</code>   | Number of query preview results to be rendered on each query preview.                                                                                                                                                                         | <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 />on each query preview.<br /><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 all the QueryPreview should be removed from the state<br />when the component is destroyed.                                                                                                                                  | <code>boolean</code>            | <code></code>      |
| <code>animation</code>          | Animation component that will be used to animate the elements.                                                                                                                                                                                | <code>AnimationProp</code>      | <code>'ul'</code>  |

## Slots

| Name                  | Description | Bindings<br />(name - type - description) |
| --------------------- | ----------- | ----------------------------------------- |
| <code>slotName</code> |             |                                           |

## See it in action

Here you have a basic example of how the QueryPreviewList 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>
  <QueryPreviewList :queriesPreviewInfo="queriesPreviewInfo" />
</template>

<script setup>
import { QueryPreviewList } from "@empathyco/x-components/queries-preview";
import { reactive } from "vue";
const queriesPreviewInfo = reactive([
  { query: "sandals" },
  { query: "tshirt" },
  { query: "jacket" },
]);
</script>
```

### Play with the default slot

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

```vue live
<template>
  <QueryPreviewList
    :queriesPreviewInfo="queriesPreviewInfo"
    #default="{ queryPreviewInfo, totalResults, results }"
  >
    <div class="x-flex x-flex-col x-gap-8 x-mb-16">
      <h1 class="x-title2">
        {{ queryPreviewInfo.query }} ({{ totalResults }})
      </h1>
      <SlidingPanel :resetOnContentChange="false">
        <div class="x-flex x-gap-8">
          <Result
            v-for="result in results"
            :key="result.id"
            :result="result"
            style="max-width: 180px"
          />
        </div>
      </SlidingPanel>
    </div>
  </QueryPreviewList>
</template>

<script setup>
import { QueryPreviewList } from "@empathyco/x-components/queries-preview";
import SlidingPanel from "@empathyco/x-components/sliding-panel.vue";
import Result from "@empathyco/x-components/result.vue";
import { reactive } from "vue";
const queriesPreviewInfo = reactive([
  { query: "sandals" },
  { query: "tshirt" },
  { query: "jacket" },
]);
</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>
  <QueryPreviewList
    class="x-flex x-gap-8"
    :queriesPreviewInfo="queriesPreviewInfo"
    #result="{ result }"
  >
    <span class="x-font-bold">{{ result.id }}:</span>
    <span>{{ result.name }}</span>
  </QueryPreviewList>
</template>

<script setup>
import { QueryPreviewList } from "@empathyco/x-components/queries-preview";
import { reactive } from "vue";
const queriesPreviewInfo = reactive([
  { query: "sandals" },
  { query: "tshirt" },
  { query: "jacket" },
]);
</script>
```