ลองทำ Gatsby Search ค้นหาบทความด้วย Algolia

gatsby new my-blog-with-algolia https://github.com/gatsbyjs/gatsby-starter-blog

npm install gatsby-plugin-algolia react-instantsearch-dom algoliasearch dotenv

cd my-blog-with-algolia
npm start

---
title: ทดสอบสร้างบทความสำหรับ Gatsby Search with Algolia
date: "2020-04-14"
---

This is example

ทดสอบสร้างบทความ สำหรับทดสอบ Gatsby Search

const queries = require("./src/utils/algolia")

require("dotenv").config()

module.exports = {

  plugins: [
    {
      resolve: `gatsby-plugin-algolia`,
      options: {
        appId: process.env.GATSBY_ALGOLIA_APP_ID,
        apiKey: process.env.ALGOLIA_ADMIN_KEY,
        queries,
        chunkSize: 10000, // default: 1000
      }
    }
  ],
}

GATSBY_ALGOLIA_APP_ID=XXXX
GATSBY_ALGOLIA_SEARCH_KEY=XXX
ALGOLIA_ADMIN_KEY=XXXX

const postQuery = `{
  posts: allMarkdownRemark {
    edges {
      node {
        objectID: id
        fields {
          slug
        }
        frontmatter {
          title
          date(formatString: "MMM D, YYYY")
        }
        excerpt(pruneLength: 3000)
      }
    }
  }
}`

const flatten = arr =>
  arr.map(({ node: { frontmatter, ...rest } }) => ({
    ...frontmatter,
    ...rest,
  }))

const settings = {
  attributeForDistinct: "slug",
  distinct: true,
}

const queries = [
  {
    query: postQuery,
    transformer: ({ data }) => flatten(data.posts.edges),
    indexName: `Posts`,
    settings,
  },
]

module.exports = queries

npm run build

...
Algolia: 1 queries to index
Algolia: query 0: executing query
Algolia: query 0: splitting in 1 jobs
⠹ onPostBuild

// components/search/index.js
import React, { useState, useEffect, createRef } from "react"
import {
  InstantSearch,
  Index,
  Configure,
  Hits,
  connectStateResults,
} from "react-instantsearch-dom"
import algoliasearch from "algoliasearch/lite"

import Input from "./Input"
import { PostHit } from "./result"

const Results = connectStateResults(
  ({ searchState: state, searchResults: res, children }) =>
    res && res.nbHits > 0 ? children : `No results for '${state.query}'`
)

const useClickOutside = (ref, handler, events) => {
  if (!events) events = [`mousedown`, `touchstart`, `focus`]
  const detectClickOutside = event => {
    if (!ref.current) return   // 🔑เพิ่มตรงนี้ เพื่อไม่ error
    !ref.current.contains(event.target) && handler()
  }
  useEffect(() => {
    for (const event of events)
      document.addEventListener(event, detectClickOutside)
    return () => {
      for (const event of events)
        document.removeEventListener(event, detectClickOutside)
    }
  })
}

export default function Search({ indices, collapse, hitsAsGrid }) {
  const ref = createRef()

  const [query, setQuery] = useState(``)
  const [focus, setFocus] = useState(false)
  const searchClient = algoliasearch(
    process.env.GATSBY_ALGOLIA_APP_ID,
    process.env.GATSBY_ALGOLIA_SEARCH_KEY
  )

  useClickOutside(ref, () => setFocus(false))

  return (
    <InstantSearch
      searchClient={searchClient}
      indexName={indices[0].name}
      onSearchStateChange={({ query }) => setQuery(query)}
      root={{ props: { ref } }}
    >
      <Configure distinct />
      <Input
        onFocus={() => setFocus(true)}
        {...{ collapse, focus, setFocus }}
      />

      <div className="search-content">
        {indices.map(({ name, title }) => (
          <Index key={name} indexName={name}>
            <header>
              <h3 className="search-title">{title}</h3>
            </header>
            <Results>
              <Hits hitComponent={PostHit(() => setFocus(false))} />
            </Results>
          </Index>
        ))}
      </div>
    </InstantSearch>
  )
}

// components/search/input.js
import React from "react"
import { connectSearchBox } from "react-instantsearch-dom"

export default connectSearchBox(({ refine, setFocus, ...rest }) => {
  return (
    <input
      type="text"
      placeholder="Search"
      aria-label="Search"
      onChange={e => refine(e.target.value)}
      {...rest}
    />
  )
})

// components/search/result.js
import React from "react"
import { Highlight } from "react-instantsearch-dom"
import { Link } from "gatsby"

export const PostHit = clickHandler => ({ hit }) => {
  return (
    <div>
      <Link to={hit.fields.slug} onClick={clickHandler}>
        <span>
          <Highlight attribute="title" hit={hit} tagName="mark" />
        </span>
      </Link>
      <div>
        <Highlight attribute="date" hit={hit} tagName="mark" />
      </div>
    </div>
  )
}

import Search from "../components/search"
const indices = [{ name: `Posts`, title: `Blog Posts` }]

const BlogIndex = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata.title
  const posts = data.allMarkdownRemark.edges

  return (
    <Layout location={location} title={siteTitle}>
      <SEO title="All posts" />
      <Bio />

      <Search indices={indices} />
      ...
}

  const searchClient = algoliasearch(
    process.env.GATSBY_ALGOLIA_APP_ID,
    process.env.GATSBY_ALGOLIA_SEARCH_KEY
  )

import { useMemo } from 'react'

const searchClient = useMemo(
  () =>
    algoliasearch(
      process.env.GATSBY_ALGOLIA_APP_ID,
      process.env.GATSBY_ALGOLIA_SEARCH_KEY
    ),
  []
)

import React from 'react'
import debounce from 'lodash.debounce'
import { connectSearchBox } from 'react-instantsearch-dom'

export default connectSearchBox(({ refine, setFocus, ...rest }) => {
  const debouncedSearch = debounce(e => refine(e.target.value), 500)

  return (
    <input
      type="text"
      placeholder="Search"
      aria-label="Search"
      onChange={e => {
        e.persist()
        if (e.target.value === '') return
        debouncedSearch(e)
      }}
      {...rest}
    />
  )
})