如何在Gatsby项目中用Algolia Configure组件过滤15分钟前的搜索结果

你当前的numericRefinements格式不符合规范，同时运算符选择有误——要筛选创建时间超过15分钟的内容，需要用>运算符（匹配创建时间戳大于15分钟前的记录），而非<。以下是正确的实现方式：

步骤1：计算15分钟前的秒级时间戳 #

先通过JavaScript计算出15分钟前的秒级时间戳（和你的createdAtTimestampInSeconds字段格式匹配）：

const fifteenMinutesAgoInSeconds = Math.floor(Date.now() / 1000) - 15 * 60;

步骤2：正确配置Configure组件 #

按照numericRefinements的规范格式配置，字段名对应一个对象，键为运算符，值为数值数组：

import { InstantSearch, Configure } from 'react-instantsearch-hooks-web';
import algolia from './path-to-your-algolia-config';

const fifteenMinutesAgoInSeconds = Math.floor(Date.now() / 1000) - 15 * 60;

const YourSearchWrapper = ({ restrictions, children }) => {
  return (
    <InstantSearch
      searchClient={algolia.searchClient}
      indexName={algolia.indexName}
      initialUiState={restrictions ? {
        [algolia.indexName]: {
          refinementList: restrictions,
        }
      } : undefined}
    >
      <Configure
        numericRefinements={{
          createdAtTimestampInSeconds: {
            '>': [fifteenMinutesAgoInSeconds]
          }
        }}
      />
      {children}
    </InstantSearch>
  );
};

export default YourSearchWrapper;

补充说明 #

• 若需要动态更新时间戳（比如组件挂载后每隔15分钟自动刷新过滤条件），可以结合useState和useEffect实现：

  import { useState, useEffect } from 'react';
  
  const YourSearchWrapper = ({ restrictions, children }) => {
    const [fifteenMinutesAgo, setFifteenMinutesAgo] = useState(
      Math.floor(Date.now() / 1000) - 15 * 60
    );
  
    useEffect(() => {
      const interval = setInterval(() => {
        setFifteenMinutesAgo(Math.floor(Date.now() / 1000) - 15 * 60);
      }, 15 * 60 * 1000);
  
      return () => clearInterval(interval);
    }, []);
  
    return (
      <InstantSearch
        searchClient={algolia.searchClient}
        indexName={algolia.indexName}
        initialUiState={restrictions ? {
          [algolia.indexName]: {
            refinementList: restrictions,
          }
        } : undefined}
      >
        <Configure
          numericRefinements={{
            createdAtTimestampInSeconds: {
              '>': [fifteenMinutesAgo]
            }
          }}
        />
        {children}
      </InstantSearch>
    );
  };
  

内容的提问来源于stack exchange，提问作者Fl0-dev