Start your content search
2 min read

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

Events

Event name Properties Description
load
error

Slots

Name Description Bindings
(name - type - description)
default Query Preview default slot. queryPreviewInfo QueryPreviewInfo - The information about the request of the
results Result[] - The results preview of the query preview
totalResults number - The total results of the search request

result Query Preview result slot. result Result - A Query Preview result

Events

A list of events that the component will emit:

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.

Play with the default slot

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

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.

<template>
  <QueryPreview :queryPreviewInfo="queryPreviewInfo" #result="{ result }">
    <span>{{ result.id }}</span>
    <span>{{ result.name }}</span>
  </QueryPreview>
</template>
<script>
  import { QueryPreview } from '@empathyco/x-components/queries-preview';
  export default {
    name: 'QueryPreviewDemoOverridingResultSlot',
    components: {
      QueryPreview
    },
    data() {
      return {
        queryPreviewInfo: { query: 'flip-flops' }
      };
    }
  };
</script>

Play with props

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

<template>
  <QueryPreview
    :maxItemsToRender="maxItemsToRender"
    :queryPreviewInfo="queryPreviewInfo"
    #default="{ results }"
  >
    <BaseGrid #default="{ item }" :items="results">
      <BaseResultLink :result="item">
        <BaseResultImage :result="item" />
      </BaseResultLink>
    </BaseGrid>
  </QueryPreview>
</template>
<script>
  import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components';
  import { QueryPreview } from '@empathyco/x-components/queries-preview';
  export default {
    name: 'QueryPreviewDemo',
    components: {
      BaseGrid,
      BaseResultImage,
      BaseResultLink,
      QueryPreview
    },
    data() {
      return {
        maxItemsToRender: 4,
        queryPreviewInfo: { query: 'flip-flops' }
      };
    }
  };
</script>
Cookie-Less