🔍検索の実装

いくつかのVelogの検索設計に従った.

バックエンド(TypeORM)

Query Selectorを使って検索しました.
TagはString[]形式なので、配列をStringに変換して検索します.

const postList = await this.posts
        .createQueryBuilder('post')
        .innerJoinAndSelect('post.user', 'user')
        .orderBy('post.createdAt', 'DESC')
        .where('post.title ILIKE :search', { search: `%${search}%` })
        .orWhere(`array_to_string(post.tags,',') ILIKE :search`, {
          search: `%${search}%`,
        })
        .orWhere('post.text ILIKE :search', { search: `%${search}%` })
        .skip(skipFrom)
        .take(9)
        .getMany();

フロントエンド

まず、Velogの設計に従い、検索ウィンドウには検索ボタンがありません.そのため、onChangeのたびにInputのvalueを検索する必要があります.例えばソウルを検索します.

s

書

省

西雨

ソウル

これにより合計5回の検索が行われる.より長い文字を入力すると、より多くのAPIが要求されます.この問題を解決するために、返品を適用しました.
DibounsingとThrotlingはパートナーのように一緒に歩くコンセプトのようです.

ジグル:連続して呼び出された関数を最後の関数のみ実行します。

書き込みエラー:関数が呼び出されてからしばらくの間、関数は呼び出されません。

ここで最後のVALUEを検索する必要があるので、返品を適用しました.
NPM throttlet-debonseモジュール
https://www.npmjs.com/package/throttle-debounce
適用されました.
ここで注意すべき点は、reactがdebonseまたはthrottleを使用する場合、関数を変更しないことに注意することです.

const onInputChanged = debounce(searchTerm, 500);

これにより、素子をレンダリングするたびにdebonseが再作成され、500 ms後に実行されます.

const onInputChanged = useMemo(() => debounce(searchTerm, 500), []);

useMemoを使用してレンダリングしても、正常に適用されるように消えることはできません.
以前のようにInfinite Scrollを検索コンテナに適用します.