@empathyco/x-components/docs/API-reference/components/next-queries/x-components.next-query-preview.md

Empathy X Components

---

title: NextQueryPreview

---

# NextQueryPreview

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

## Props

| Name                          | Description                                     | Type                   | Default       |
| ----------------------------- | ----------------------------------------------- | ---------------------- | ------------- |
| <code>suggestion</code>       | The next query to retrieve the results preview. | <code>NextQuery</code> | <code></code> |
| <code>maxItemsToRender</code> | Number of suggestion results to be rendered.    | <code>number</code>    | <code></code> |

## Slots

| Name                 | Description                      | Bindings<br />(name - type - description)                                                                                                               |
| -------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>default</code> | Next Query Preview default slot. | **suggestion** <code>NextQuery</code> - Next Query suggestion data<br />**results** <code>Result[]</code> - The results preview of the next query<br /> |
| <code>result</code>  | Next Query Preview result slot.  | **result** <code>Result</code> - A Next Query Preview result                                                                                            |

## Events

This component emits the
[`NextQueryPreviewMountedHook`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
when it is mounted.

## See it in action

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

<script>
import { NextQueryPreview } from '@empathyco/x-components/next-queries'

export default {
  name: 'NextQueryPreviewDemo',
  components: {
    NextQueryPreview,
  },
  data() {
    return {
      suggestion: {
        modelName: 'NextQuery',
        query: 'tshirt',
        facets: [],
      },
    }
  },
}
</script>
```

### Play with the default slot

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

```vue live
<template>
  <NextQueryPreview :suggestion="suggestion" #default="{ totalResults, results }">
    <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>
  </NextQueryPreview>
</template>

<script>
import { NextQueryPreview } from '@empathyco/x-components/next-queries'
import { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components'

export default {
  name: 'NextQueryPreviewDemoOverridingSlot',
  components: {
    NextQueryPreview,
    SlidingPanel,
    BaseResultLink,
    BaseResultImage,
  },
  data() {
    return {
      suggestion: {
        modelName: 'NextQuery',
        query: 'tshirt',
        facets: [],
      },
    }
  },
}
</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>
  <NextQueryPreview :suggestion="suggestion" #result="{ result }">
    <span>{{ result.id }}</span>
    <span>{{ result.name }}</span>
  </NextQueryPreview>
</template>

<script>
import { NextQueryPreview } from '@empathyco/x-components/next-queries'

export default {
  name: 'NextQueryPreviewDemoOverridingResultSlot',
  components: {
    NextQueryPreview,
  },
  data() {
    return {
      suggestion: {
        modelName: 'NextQuery',
        query: 'tshirt',
        facets: [],
      },
    }
  },
}
</script>
```

### Play with props

In this example, the suggestions has been limited to render a maximum of 4 items.

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

<script>
import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components'
import { NextQueryPreview } from '@empathyco/x-components/next-queries'

export default {
  name: 'NextQueryPreviewDemo',
  components: {
    BaseGrid,
    BaseResultImage,
    BaseResultLink,
    NextQueryPreview,
  },
  data() {
    return {
      maxItemsToRender: 4,
      suggestion: {
        modelName: 'NextQuery',
        query: 'tshirt',
        facets: [],
      },
    }
  },
}
</script>
```