Searchkit Client

Package Installation

yarn add @searchkit/client


The SearchkitClient class encapsulates Searchkit's core client-side API. Maintains query and filter state and performs an apollo query


import { SearchkitClient } from '@searchkit/client'
const client = new SearchkitClient({
itemsPerPage: 12,
apolloOptions: {
fetchPolicy: 'network-only'

SearchkitClientConfig Field Options

itemsPerPageOptional. Default number of items per page.

SearchkitClient Methods

search() : void

Will perform a request to API with the current query, page and filters currently in state

setQuery(query): void

To set the query. When called, will reset pagination and filters applied

queryThe query value

getQuery(): string

Returns the current query that has been set

setPage(page: PageOption): void

Sets the current page

pagePageOptions is an object which has size and from properties. Size sets number of items and from is the item number to start from.

getFilters(): Filter[]

Returns an array of filters currently in state

canResetSearch(): Boolean

Returns true when there has been a query or filter applied to the search

isFilterSelected(filter: Filter): Boolean

Returns true if the filter has been applied to the search.

getFiltersById(id): Filter[] | null

Returns all filters that match id. If no filters have been found, will return null

removeFilter(filter: Filter): void

Removes filter from applied filters

removeFiltersById(id): void

Removes all filters from applied filters that match id

addFilter(filter: Filter): void

Adds filter to applied filters

toggleFilter(filter: Filter): void

If the filter already exists in applied filters then it will remove the filter. If doesn't exist, will add the filter

withSeachkit HOC

Wraps component with Searchkit Provider with an instantiated SearchkitClient. Useful for NextJS Pages.


import { withSearchkit } from '@searchkit/client'
const Index = (props) => {
return <Search />
export default withSearchkit(Index)

Searchkit Provider

Provides to child components access to the shared SearchkitClient instance


import { SearchkitClient, SearchkitProvider } from '@searchkit/client
const client = new SearchkitClient()
export default () => (
<SearchkitProvider client={client}>
<SearchComponents />


client: Required. Instance of SearchkitClient to be used by child components which need SearchkitClient API

useSearchkit hook

Returns the shared SearchkitClient instance. Required to update the shared query / filter state and for components to invoke a new query.


import React, { useState } from 'react'
import { useSearchkit } from '@searchkit/client'
const SearchInput = () => {
const api = useSearchkit()
const [value, setValue] = useState('')
return (
<form onSubmit={(e) => {
}} >
<input type="text" value={value} onChange={(e) => {
const inputValue =


Query contains all data requirements needed to power the search.


import { useSearchkitQuery } from '@searchkit/client'
const query = gql`
query resultSet($query: String, $filters: [FiltersSet], $page: PageInput) {
results(query: $query, filters: $filters) {
hits(page: $page) {
items {
const Index = () => {
const { data, loading } = useSearchkitQuery(query)
return (


queryGQL query that has query, filters and page variables