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

สวัสดีครับ บทความนี้ผมจะมาแชร์ วิธีการทำ Search บนเว็บไซต์นะครับ เนื่องจากว่าผมเพิ่งลองใส่ช่อง ค้นหา ที่บล็อกนี้ โดยใช้ Algolia นั่นเอง

และตัวบล็อกของผมเป็น Gatsby ที่ built เป็น Static Web ฉะนั้น ผมก็เลยใช้ Gatsby + Algolia นั่นเอง

โดยทั้งหมด ผมได้ไอเดียและ Refenence จากบทความนี้ Adding Search with Algolia สามารถอ่านเพิ่มเติมได้ครับ

เราลองมาทำ Gatsby Search ด้วย Algolia กันดูนะครับ โดยผมจะใช้ Gatsby Starter Blog ครับ เป็น Starter project

ทำไมต้อง Algolia?

เพราะว่า Algolia นั้นเป็น Service ที่ทำ Search โดยเฉพาะอยู่แล้ว ช่วยให้เราสามารถทำ Search บนเว็บไซต์ได้ ทำ Search สำหรับ Document หรือค้นหาแบบ Full Text Search ได้เช่นกัน โดยราคา ก็มีแตกต่างกันไป ซึ่งแบบฟรี สามารถใช้งานได้ 50k requests ต่อเดือน (ก็เพียงพอสำหรับเริ่มต้น หรือโปรเจ็กเล็กๆแล้วครับ)

และข้อดีคือ ตัว Algolia มี Instants Search สำหรับ React ด้วย และโดยเฉพาะ มี Gatsby Plugin ด้วยเช่นกัน

Create Project

เริ่มต้นด้วยการ สร้าง Project จาก Gatsby CLI ครับ (ใครไม่มีอย่าลืมติดตั้งด้วย npm install gatsby-cli -g นะครับ)

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

ติดตั้ง Plugins ที่ใช้

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

• gatsby-plugin-algolia - Plugin สำหรับ create index ส่งไป Algolia
• react-instantsearch-dom - เป็นตัว React Component สำหรับ Search / Query
• algoliasearch - ตัว Core หลักของ Algolia
• dotenv - เอาไว้จัดการ environment เนื่องจากเราจะใช้ API_KEY, SECRET KEY ของ Algolia ด้วย

จากนั้น ลอง Start server ขึ้นมาเลยครับ

cd my-blog-with-algolia
npm start

ตัว Gatsby Starter Blog จะเสร็จอัพอะไรต่างๆ ไว้ให้แล้ว เราสามารถเขียนบทความขึ้นใหม่ได้โดยไปที่โฟลเดอร์ content/blog เราสามารถเพิ่มโฟลเดอร์ หรือ Markdown ไฟล์ได้เลย (ตรงนี้ผมไม่พูดถึง Basic Gatsby หรือวิธีใช้ Gatsby Starter Blog เนอะ)

ลองเพิ่มบทความซักตัวนึงขึ้นมา content/blog/gatsby-with-algolia/index.md

1
---
2
title: ทดสอบสร้างบทความสำหรับ Gatsby Search with Algolia
3
date: '2020-04-14'
4
---
5

6
This is example
7

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

Workflow

ทีนี้ขั้นตอนต่อมา เรามาดูตัว Workflow กันก่อนเลย คือ เราอยากจะให้ Algolia Search บนเว็บเราได้ เราก็ต้องเตรียมข้อมูลที่จะส่งไปให้ Algolia เก็บ โดยจะเป็น index และก็พวก meta data ต่างๆ ที่เราอยากให้เก็บ เช่น post tag title อะไรต่างๆ

เมื่อ Algolia มีข้อมูลในระบบแล้ว ต่อมา เราก็มา Implement ส่วน Gatsby โดยการทำ Search และก็จะ Request ไปที่ Algolia Server โดยใช้ API ของทาง Algolia เราก็จะได้ผลลัพธ์มาที่เว็บเรานั่นเอง ซึ่งการที่เราจะเก็บข้อมูล หรือส่ง ข้อมูลไปเก็บ index ใน Algolia ก็อาจจะมีขั้นตอนอยู่เหมือนกัน แต่โชคดี เรามี gatsby plugin เลยลดงานไปเยอะเลย

• มอง Gatsby คือ Frontend
• และ Algolia เสมือน Backend คอยเก็บ data เรา

จากคำอธิบายของ Workflow แล้ว เราได้ขั้นตอนการทำงานดังนี้

1. ใช้ Gatsby Plugins เพื่อทำการส่งข้อมูลไป Algolia
2. เราจะได้ API ก็ต้องทำการสร้าง App ใน Alogia Dashboard ก่อน (ไม่มี account ก็สมัครเลยจ้า)
3. เมื่อข้อมูลของเราถูกเก็บไว้ที่ Algolia แล้ว ก็ทำการเพิ่ม search โดยใช้ react-instantsearch-dom
4. เมื่อได้ผลลัพธ์​เราก็มาแสดงผลบนเว็บไซต์ของเรานั่นเอง

ส่วนวิธีการแสดงผล จะกดปุ่ม Search แล้วไปหน้าใหม่ จะโชว์ Modal จะ Overlay ก็แล้วแต่เลยครับ สำหรับบทความนี้ผมเป็นแค่ไอเดียเฉยๆ จะไม่ได้ทำหน้า UI หรือพูดถึง style นะครับ

Gatsby Plugin Config

ทำการ Config Gatsby โดยแก้ไขไฟล์ gatsby-config.js

1
const queries = require('./src/utils/algolia')
2

3
require('dotenv').config()
4

5
module.exports = {
6
  plugins: [
7
    {
8
      resolve: `gatsby-plugin-algolia`,
9
      options: {
10
        appId: process.env.GATSBY_ALGOLIA_APP_ID,
11
        apiKey: process.env.ALGOLIA_ADMIN_KEY,
12
        queries,
13
        chunkSize: 10000 // default: 1000
14
      }
15
    }
16
  ]
17
}

สังเกตว่า มีการโหลด dotenv ด้วย โดยใช้ไฟล์ .env นั่นเองครับ

ต่อมาเข้าไปหน้าเว็บ Algolia แล้วสร้าง App ขึ้นใหม่ จะได้ หน้า Dashboard แบบด้านล่าง เลือกไปที่ API Keys จากนั้น Copy ทั้ง 3 ค่ามาใส่ไฟล์ .env ได้เลย

GATSBY_ALGOLIA_APP_ID=XXXX
GATSBY_ALGOLIA_SEARCH_KEY=XXX
ALGOLIA_ADMIN_KEY=XXXX

จากนั้น สร้างไฟล์ src/utils/algolia.js ขึ้นมา

1
const postQuery = `{
2
  posts: allMarkdownRemark {
3
    edges {
4
      node {
5
        objectID: id
6
        fields {
7
          slug
8
        }
9
        frontmatter {
10
          title
11
          date(formatString: "MMM D, YYYY")
12
        }
13
        excerpt(pruneLength: 3000)
14
      }
15
    }
16
  }
17
}`
18

19
const flatten = (arr) =>
20
  arr.map(({ node: { frontmatter, ...rest } }) => ({
21
    ...frontmatter,
22
    ...rest
23
  }))
24

25
const settings = {
26
  attributeForDistinct: 'slug',
27
  distinct: true
28
}
29

30
const queries = [
31
  {
32
    query: postQuery,
33
    transformer: ({ data }) => flatten(data.posts.edges),
34
    indexName: `Posts`,
35
    settings
36
  }
37
]
38

39
module.exports = queries

โค๊ดด้านบน จะเป็น Query เพื่อดึง data จาก markdown file ที่เราเขียนบทความนั่นเอง ด้วย allMarkdownRemark สิ่งที่เราจะส่งไปเก็บคือ title, date, slug ครับ โดย index name เราตั้งชื่อให้มันคือ Posts ครับ

ซึ่งตัว Gatsby Plugin Algolia ถ้าเรารัน develop มันจะไม่ ทำงานครับ เราต้องรัน build ครับ ด้วยคำสั่ง

npm run build

จะสังเกตเห็น console/terminal แบบนี้

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

ลองเข้าไปดูหน้าเว็บ Algolia จะเห็นว่า Index เรามีข้อมุลมาเก็บไว้แล้วครับ ที่ Menu Indices นั่นเอง

Add Search to Frontend

ต่อมาเมื่อเราได้ข้อมูลมาเก็บที่ Algolia (Backend) เรียบร้อย ขั้นต่อมาคือ implement search ครับ โดยตัวอย่าง ผมจะทำแค่ functional มันนะ คือ search และแสดงผลลัพธ์ได้ โดยแบ่งออกเป็น 3 ไฟล์ดังนี้

• components/search/index.js - component หลักสำหรับแสดงช่อง search
• components/search/input.js - สำหรับ input เพื่อค้นหา
• components/search/result.js - ผลลัพธ์ หรือ

1
import React, { useState, useEffect, createRef } from 'react'
2
import { InstantSearch, Index, Configure, Hits, connectStateResults } from 'react-instantsearch-dom'
3
import algoliasearch from 'algoliasearch/lite'
4

5
import Input from './Input'
6
import { PostHit } from './result'
7

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

12
const useClickOutside = (ref, handler, events) => {
13
  if (!events) events = [`mousedown`, `touchstart`, `focus`]
14
  const detectClickOutside = (event) => {
15
    if (!ref.current) return // 🔑เพิ่มตรงนี้ เพื่อไม่ error
16
    !ref.current.contains(event.target) && handler()
17
  }
18
  useEffect(() => {
19
    for (const event of events) document.addEventListener(event, detectClickOutside)
20
    return () => {
21
      for (const event of events) document.removeEventListener(event, detectClickOutside)
22
    }
23
  })
24
}
25

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

29
  const [query, setQuery] = useState(``)
30
  const [focus, setFocus] = useState(false)
31
  const searchClient = algoliasearch(
32
    process.env.GATSBY_ALGOLIA_APP_ID,
33
    process.env.GATSBY_ALGOLIA_SEARCH_KEY
34
  )
35

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

38
  return (
39
    <InstantSearch
40
      searchClient={searchClient}
41
      indexName={indices[0].name}
42
      onSearchStateChange={({ query }) => setQuery(query)}
43
      root={{ props: { ref } }}
44
    >
45
      <Configure distinct />
46
      <Input onFocus={() => setFocus(true)} {...{ collapse, focus, setFocus }} />
47

48
      <div className="search-content">
49
        {indices.map(({ name, title }) => (
50
          <Index key={name} indexName={name}>
51
            <header>
52
              <h3 className="search-title">{title}</h3>
53
            </header>
54
            <Results>
55
              <Hits hitComponent={PostHit(() => setFocus(false))} />
56
            </Results>
57
          </Index>
58
        ))}
59
      </div>
60
    </InstantSearch>
61
  )
62
}

ไฟล์ search.js จะเป็นส่วนแสดงผล การค้น มี ส่วนที่เป็น handle inside/outside เวลากดปุ่ม ค้นหาด้วย โดย InstantSearch จะเป็น container component และจัดการ onSearchStateChange เมื่อ input มีการเปลี่ยนค่าครับ

1
import React from 'react'
2
import { connectSearchBox } from 'react-instantsearch-dom'
3

4
export default connectSearchBox(({ refine, setFocus, ...rest }) => {
5
  return (
6
    <input
7
      type="text"
8
      placeholder="Search"
9
      aria-label="Search"
10
      onChange={(e) => refine(e.target.value)}
11
      {...rest}
12
    />
13
  )
14
})

Search Input ก็ไม่มีอะไรมาก เป็นแค่ input ธรรมดา มีแค่ตอน onchange จะไปเรียก refine() ที่เป็น function ในการ query algolia

1
import React from 'react'
2
import { Highlight } from 'react-instantsearch-dom'
3
import { Link } from 'gatsby'
4

5
export const PostHit =
6
  (clickHandler) =>
7
  ({ hit }) => {
8
    return (
9
      <div>
10
        <Link to={hit.fields.slug} onClick={clickHandler}>
11
          <span>
12
            <Highlight attribute="title" hit={hit} tagName="mark" />
13
          </span>
14
        </Link>
15
        <div>
16
          <Highlight attribute="date" hit={hit} tagName="mark" />
17
        </div>
18
      </div>
19
    )
20
  }

ส่วนนี้ไว้แสดงผล เวลาที่เรากดค้นหาครับ สามารถใช้ component Highlight ของ instantsearch-dom ได้

ทีนี้ เมื่อเรามี 3 components เรียบร้อย ก็ไปหน้า src/pages/index.js เพื่อเพิ่มกล่อง Search ครับ โดยผมเพิ่มไว้ก่อน รายการบทความเลย ด้านล่างของ <Bio>

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

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

8
  return (
9
    <Layout location={location} title={siteTitle}>
10
      <SEO title="All posts" />
11
      <Bio />
12

13
      <Search indices={indices} />
14
      ...
15
}

ลอง Start server ใหม่ จะเห็นว่า เราสามารถค้นหา และแสดงผลของ Search ได้เรียบร้อย

ทีนี้มันจะมีปัญหานิดนึง ตรงการ search มันจะ render ทกครั้งที่ state เปลี่ยนเพราะ searchClient ของ Algolia ครับ ที่ไฟล์ components/search/index.js

1
const searchClient = algoliasearch(
2
  process.env.GATSBY_ALGOLIA_APP_ID,
3
  process.env.GATSBY_ALGOLIA_SEARCH_KEY
4
)

ตรงส่วนนี้ มันจะ query ก่อน ตอน page โหลด แล้วเมื่อ state เปลี่ยน เช่น setFocus มันก็ re-render อีก แก้ด้วยการใส่ useMemo() ซะ เป็นแบบนี้

1
import { useMemo } from 'react'
2

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

ต่อมา ถ้าอยากหน่วง user input ไม่ให้ query เร็ว ก็ใส่พวก debounce เช่น lodash.debounce ก็ได้ครับ ง่ายดี ตัว components/search/input.js จะได้แบบนี้

1
import React from 'react'
2
import debounce from 'lodash.debounce'
3
import { connectSearchBox } from 'react-instantsearch-dom'
4

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

8
  return (
9
    <input
10
      type="text"
11
      placeholder="Search"
12
      aria-label="Search"
13
      onChange={(e) => {
14
        e.persist()
15
        if (e.target.value === '') return
16
        debouncedSearch(e)
17
      }}
18
      {...rest}
19
    />
20
  )
21
})

ข้อควรระวัง

• เวลาเรา index ไป algolia ตัว free plan มี size limit อยู่ครับ ฉะนั้น ถ้าเรา Query ข้อมูลโพสทั้งหมด ไปเก็บ ก็อาจจะเกิน size ได้ อาจจะเลือก excerpt น้อยๆ
• อย่าลืมเรื่อง useMemo() สำหรับ search นะครับ ย้ำอีกครั้ง เพื่อไม่ใช่ react มัน re-render ทุกๆครั้งที่กด input หรือ focus เปลี่ยน (ผมลืม จนทำให้ Quota limit ตั้งแต่วันแรก ฮ่าๆ เมล์แจ้งมา ใช้ไป 300k queies แอพโดนบล็อกเลย ฮ่าๆ)
• ถ้าอยากให้หน่วงเวลาเยอะๆ ไม่ให้ User ค้นหาถี่ๆ ก็ใส่ debounce เพิ่มไปครับ

ก็มีประมาณนี้ครับ หวังว่าจะเป็นประโยชน์ สำหรับใครหลายๆ คนที่ลองทำ Search และใช้ Gatsby อยู่เหมือนกัน