Need help with searchkit?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

searchkit
4.0K Stars 378 Forks Other 1.8K Commits 8 Opened issues

Description

GraphQL API & React UI components for Elasticsearch. The easiest way to build a great search experience

Services available

!
?

Need anything else?

Contributors list

No Data

Search, made easy

Searchkit is an open source toolkit which helps you build a great search experience with Elasticsearch.

api-setup-2

Searchkit is a Graph QL / React UI Component framework to: - Quickly build a GraphQL API focused on search UI - Out-of-the-box React components - A great Search experience without needing to be an expert in Elasticsearch, React and Node

Website | View Demo | Documentation

Read our blog post about Searchkit V3

Quick Intro

From a configuration

const searchkitConfig = {
  host: 'http://demo.searchkit.co/api/',
  index: 'movies',
  hits: {
    fields: [ 'title', 'plot', 'poster' ]
  },
  query: new MultiMatchQuery({ 
    fields: [ 'plot','title^4'] 
  }),
  facets: [
    new RefinementSelectFacet({ 
      field: 'type.raw',
      id: 'type',
      label: 'Type'
    }),
    new RefinementSelectFacet({
      field: 'writers.raw',
      id: 'writers',
      label: 'Writers',
      multipleSelect: true
    }),
    new RangeFacet({
      field: 'metaScore',
      id: 'metascore',
      label: 'Metascore',
      range: {
        min: 0,
        max: 100,
        interval: 5
      }
    }),
    new DateRangeFacet({
      field: 'released',
      id: 'released',
      label: 'Released'
    })
  ]
}

Will provide a GraphQL API where you can perform queries like:

Simple Hits

Try it out

{
  results(query: "heat") {
    hits {
      items {
        id
        fields {
          title
        }
      }
    }
  }
}

Facets

Try it out

{
  results(query: "heat") {
    facets {
      id
      label
      type
      display
      entries {
        id
        label
        count
      }
    }
    hits {
      items {
        id
        fields {
          title
        }
      }
    }
  }
}

Filtering

Try it out

graphql
{
  results(filters: [{id: "type", value: "Movie"}, {id: "metascore", min: 30}]) {
    facets {
      id
      label
      type
      display
      entries {
        id
        label
        count
      }
    }
    hits {
      items {
        id
        fields {
          title
        }
      }
    }
  }
}

React Integration

We provide a thin React client which integrates with Searchkit's API, Apollo Client. It maintains search state (pagination, filtering and querying) and calls Apollo client to fetch.

React Components

import {
  FacetsList,
  SearchBar,
  Pagination,
  ResetSearchButton,
  SelectedFilters
} from '@searchkit/elastic-ui'

const Page = () => { const { data, loading } = useSearchkitQuery(query) const [viewType, setViewType] = useState('list') const Facets = FacetsList([]) return (

{data?.results.summary.total} Results

setViewType(id)} /> {viewType === 'grid' ? : } ) }

See quickstart guide

Example Projects

  • Next App with Searchkit & Elastic UI Code | Demo

NPM Packages

Sponsors

QBOX Elasticsearch hosting. They have kindly provided us an elasticsearch instance for our demo site.

FAQ

Can I upgrade from Searchkit v2?

Searchkit has undergone a total rewrite so whilst it should be straightforward to move onto, any code written for searchkit legacy wouldn't work on Searchkit v3.

Do I need to expose my Elasticsearch instance to the browser?

No! You dont expose your elasticsearch cluster to the browser, Search API sits in between elasticsearch and the browser.

I'm building a Native App / use angular. Do I need to use the Searchkit UI components?

No! Searchkit API provides a dev friendly search API. Searchkit simplifies using elasticsearch for search so that you can build your own UI components very easily. If your apps dont use react or you are building a native mobile app, you can just use the searchkit API. See our blog article for more information

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.