Skip to main content

Searchkit Elastic UI

Setup

Require to setup the provider, define a GQL query for components and use the searchkitQuery hook to perform the search. See Quick start UI Setup for more information.

import {
useSearchkitVariables,
SearchkitProvider,
SearchkitClient,
} from '@searchkit/client';
import {gql, useQuery} from '@apollo/client';

const query = gql`
query resultSet($query: String, $filters: [SKFiltersSet], $page: SKPageInput) {
results(query: $query, filters: $filters) {
summary {
total
appliedFilters {
id
identifier
display
label
... on DateRangeSelectedFilter {
dateMin
dateMax
}

... on NumericRangeSelectedFilter {
min
max
}

... on ValueSelectedFilter {
value
}
}
query
}
hits(page: $page) {
page {
total
totalPages
pageNumber
from
size
}
items {
id
fields {

}
}
}
facets {
identifier
type
label
display
entries {
label
count
}
}
}
}
`;

const client = SearchkitClient();

export default () => {
const variables = useSearchkitVariables();
const {
previousData,
data = previousData,
loading,
} = useQuery(query, {
variables,
});

return (
<div>
<SearchkitProvider client={client}>
<SearchBar loading={loading} />
<Hits data={data} />
</SearchkitProvider>
</div>
);
};

Components

Usage

import {
SearchBar
} from '@searchkit/elastic-ui'
<SearchBar loading={loading} />

Options

OptionDescription
loadingBoolean

SelectedFilters

Usage

import {
SelectedFilters
} from '@searchkit/elastic-ui'
<SelectedFilters data={data?.results} loading={loading} />

Options

OptionDescription
loadingBoolean. Loading value from GQL query
dataResponse from GQL query

ResetSearchButton

Usage

import {
ResetSearchButton
} from '@searchkit/elastic-ui'
<ResetSearchButton loading={loading} />

Options

OptionDescription
loadingBoolean. Loading value from GQL query

Pagination

Usage

import {
Pagination
} from '@searchkit/elastic-ui'
<Pagination data={data?.results} />

Options

OptionDescription
dataBoolean. Loading value from GQL query

Sorting Selector

Pagination.mov

Usage

Requires sorting configuration within the resolvers. See sorting documentation.

import {
SortingSelector
} from '@searchkit/elastic-ui'
<SortingSelector data={data?.results} loading={loading} />

GraphQL Query

Relies on GraphQL query

  results(query: "") {
summary {
total
sortOptions { <--- Required: sortOptions
id
label
}
}
hits(sortBy: "relevance") {
sortedBy <--- Required: the current sortId
}
}

Options

OptionDescription
datadata response from graphql request
loadingBoolean.

Facets

FacetsList

Searchkit API returns a list of facets, in the configuration order. Each facet is configured with a display field and this field is tied with a component.

ListFacet component will use the facet response and for each facet, will display the correct facet component to the user.

FacetsList is a function which returns a React component that accepts the data / loading props.You will be able to pass custom facet components within the optional argument. FacetsList Searchkit will render all Searchkit Facet Components.

Usage

import {FacetsList} from '@searchkit/elastic-ui';

export default () => {
const Facets = FacetsList([CustomFacet]);
return (
<div>
<Facets data={data?.results} loading={loading} />
</div>
);
};

ListFacet

RangeSliderFacet

ComboBoxFacet

DateRangeFacet