Elasticsearch 및 Searchkit으로 검색 UI GraphQL API

이 튜토리얼은 개발자에게 친숙한 Elasticsearch용 GraphQL API를 빠르게 구축하는 데 도움이 됩니다.

Searchkit은 훌륭한 검색 경험을 구축하기 위해 Elasticsearch를 사용할 때의 좌절감에서 태어났습니다. 정말 강력하지만 최대한 활용하기가 정말 어려울 수 있습니다. Searchkit은 Elasticsearch에 대한 깊은 지식이 없어도 Facets, Highlighting, Sorting, 쿼리와 같은 훌륭한 검색 경험을 구성하는 검색 기능을 구성하는 데 중점을 둡니다.

이 자습서에서는 Elasticsearch, GraphQL, Apollo Server 및 AWS Lambda를 사용하여 개발자 친화적인 검색 API를 구축하는 단계를 안내합니다.

https://demo.searchkit.co/api/graphql을 지원하는 영화용 Searchkit APIhttps://demo.searchkit.co/의 작업 데모를 참조하십시오.

데이터 인덱싱

먼저 @searchkit/cli를 사용하여 샘플 데이터 세트를 Elasticsearch로 인덱싱합니다. 예제 인덱서 프로젝트를 다운로드하여 시작합니다.

curl https://codeload.github.com/searchkit/searchkit/tar.gz/next | tar -xz --strip=2 searchkit-next/examples/indexer

data.json의 샘플 데이터 세트와 config.ts 파일을 포함하는 인덱서 내부에 새 폴더를 생성하여 시작합니다.



그런 다음 config.ts 내부에 필요한 구성을 추가하십시오.

import data from './data.json'
import { withConfig, toNumber, splitComma, toDate } from '@searchkit/cli'

withConfig({
  index: 'imdb_movies', // the elasticsearch index name
  host: "http://localhost:9200", // host url for elasticsearch
  source: data, // Array of raw documents sample data.
  fields: [
    {
      fieldName: 'type',  // name of field. Must be lowercase
      stored: true, // fields you want returned in the API. 
      facet: true,  // If you want the value to be used as a facet
      searchable: true // If you want the field to be searchable within query
      type: 'integer' // Optional. Default is keyword. Can be `integer`, `date` or `float`
      sourceOptions: { 
        path: 'Type' // Used in indexing step with source dataset. The key for the field value source. 
        transform: (str, doc) => {
          return str.toUppercase()
        } // Optional. Function to provide transformation from source value to document field value 
      }
    }
  ]
})

필요한 필드를 추가합니다(cli 사용 방법에 대한 자세한 내용은 Setup Indexing document ).

그런 다음 package.json에서 대상을 업데이트하여 명령을 실행합니다.



그런 다음 명령을 실행하십시오.



다음 옵션을 묻는 메시지가 표시됩니다.

예제 Searchkit 구성을 생성하시겠습니까?

그렇다면 CLI는 skConfig.md라는 현재 작업 디렉터리에 파일을 생성합니다. 그러면 config.ts 내의 필드 정의를 기반으로 Elasticsearch 매핑 파일과 예제 searchkit 구성이 제공됩니다.

호스트가 감지되었습니다. 인덱스를 삭제하고 인덱스 매핑을 다시 삽입하시겠습니까?

그렇다면 Elasticsearch 색인을 다시 생성합니다.

소스가 감지되었습니다. ES 호스트에 문서를 삽입하시겠습니까?

그렇다면 문서를 elasticsearch로 인덱싱합니다.

샘플 데이터 세트를 올바른 유형의 elasticsearch로 인덱싱한 후 elasticsearch 인스턴스에 데이터가 표시되는지 확인하십시오.

AWS Lambda Serverless 및 Searchkit으로 GraphQL API 구축

프로젝트 설정

aws lambda 예제 프로젝트를 다운로드하여 시작하십시오.

curl https://codeload.github.com/searchkit/searchkit/tar.gz/next | tar -xz --strip=2 searchkit-next/examples/aws-lambda
yarn
yarn global add serverless

그런 다음 원사를 통해 종속성을 설치하고 전역적으로 서버리스를 설치합니다.

Searchkit API 구성 업데이트

인덱서 폴더에서 CLI가 예제 구성(skConfig.md)을 생성합니다.



이는 지정한 필드를 기반으로 생성되므로 요구 사항을 반영하기 위해 약간의 변경이 필요할 수 있습니다.

API documentation에서 다양한 유형의 패싯을 모두 볼 수 있습니다.

handler.js에서 구성 및 GraphQL 유형 복사 및 업데이트



그런 다음 serverless offline를 사용하여 로컬에서 람다를 실행할 수 있어야 합니다.

serverless offline

http://localhost:3000/dev/graphql에서 graphql 놀이터를 방문하십시오.

모든 것이 성공하면 결과 적중 쿼리를 만들 수 있어야 합니다.

{
  results {
    hits {
      items {
        id
        ... on ResultHit {
          fields {
            id
            name
            designerName
            price
            colour
          }
        }
      }
    }
  }
}

만족하면 serverless을 사용하여 람다를 AWS로 푸시할 수 있습니다.

GraphQL API 사용

다음은 몇 가지 예제 쿼리입니다.

패싯 표시 및 필터 적용

{
  results(filters: [{ identifier: "colour", value: "Beige"}]) {
    facets {
      identifier
      label
      type
      display
      entries {
        id
        label
        count
        isSelected
      }
    }
    hits {
      items {
        id
        ... on ResultHit {
          fields {
            id
            name
            designerName
            price
            colour
          }
        }
      }
    }
  }
}

검색어

{
  results(query: "jacket", filters: [{ identifier: "colour", value: "Beige"}]) {
    facets {
      identifier
      label
      type
      display
      entries {
        id
        label
        count
        isSelected
      }
    }
    hits {
      items {
        id
        ... on ResultHit {
          fields {
            id
            name
            designerName
            price
            colour
          }
        }
      }
    }
  }
}

패싯 필터 검색

{
    results(filters: []) {
      facet(identifier: "colour", query: "re") {
        identifier
        label
        entries {
          id
          label
          count
        }
      }
    }
  }

요약

{
    results(filters: [{ identifier: "colour", value: "red"}]) 
    {
      summary {
        total
        appliedFilters {
          id
          identifier
          label
          display
        }
        query
        sortOptions {
          id
          label
        }
      }
    }
  }

및 documentation site의 Searchkit API 기능에 대한 자세한 정보

통합

반응하다

Searchkit은 React UI 구성 요소도 제공합니다. out of the box react components 또는 build your own components 사용 방법에 대한 자세한 내용을 읽어보십시오.

Vue, Svelte와 같은 다른 프레임워크

여기에서 다른 프레임워크에 대한 사용web apollo client에 대한 자세한 정보를 참조하십시오.

기본 iOS 및 Android

Apollo는 GraphQL 쿼리를 수행하기 위한 iOS 클라이언트를 제공합니다.

iOS Client
Android Client