如何使用Searchkit创建Elasticsearch求和聚合查询？

我来帮你搞定Searchkit里的Elasticsearch求和聚合查询～其实Searchkit已经给我们封装好了现成的组件，不用自己写复杂的Elasticsearch DSL，上手很简单的。

核心思路：使用SumAggregation组件 #

Searchkit的React库提供了SumAggregation组件，专门用来实现求和聚合，你只需要配置对应的字段和参数，它会自动向Elasticsearch发送求和聚合请求。

步骤1：导入所需组件 #

首先确保你已经导入了SumAggregation以及相关的Searchkit组件：

import { SearchkitProvider, Layout, TopBar, SearchBox, LayoutBody, SideBar, SumAggregation, useSearchkit } from '@searchkit/react';

步骤2：在布局中添加求和聚合组件 #

你可以把SumAggregation放在侧边栏（SideBar）或者其他合适的位置，配置好关键参数：

• id：唯一标识这个聚合，后续获取结果时会用到
• field：指定Elasticsearch中要进行求和的数值类型字段（比如整数、浮点数类型）
• label：UI上显示的聚合名称

结合你现有的代码，修改后的示例如下：

function App() {
  return (
    <SearchkitProvider searchkit={searchkit}>
      <Layout>
        <TopBar>
          <SearchBox
            placeholder="Rechercher..."
            autofocus={true}
            searchOnChange={true}
            queryOptions={{ analyzer: "standard" }}
            prefixQueryFields={["juridiction", "decision", "annee", "content"]}
          />
        </TopBar>
        <LayoutBody>
          <SideBar>
            {/* 这里添加求和聚合组件 */}
            <SumAggregation
              id="total-annee-sum"
              field="annee" // 替换成你实际要求和的数值字段，比如montant、quantite等
              label="年份总和"
            />
            {/* 你的其他筛选组件可以继续放在这里 */}
          </SideBar>
          <LayoutMain>
            {/* 这里可以添加显示求和结果的组件 */}
            <TotalSumDisplay />
            {/* 你的搜索结果列表组件 */}
          </LayoutMain>
        </LayoutBody>
      </Layout>
    </SearchkitProvider>
  );
}

步骤3：展示求和聚合结果 #

如果需要在页面上显示求和的结果，可以通过useSearchkit hook获取查询结果中的聚合数据，自定义一个展示组件：

function TotalSumDisplay() {
  const { results } = useSearchkit();
  // 通过之前设置的id获取聚合结果
  const sumResult = results.aggregations?.['total-annee-sum'];
  return sumResult ? (
    <div style={{ padding: '10px', background: '#f8f9fa', borderRadius: '4px', marginBottom: '16px' }}>
      <strong>当前搜索结果总和：</strong> {sumResult.value}
    </div>
  ) : null;
}

进阶：自定义脚本求和 #

如果需要更复杂的求和逻辑（比如多个字段相加），可以使用script参数来定义脚本：

<SumAggregation
  id="custom-total-sum"
  label="自定义总金额"
  script="doc['montant_ht'].value + doc['taxes'].value"
/>

注意事项 #

• 确保你指定的field是Elasticsearch中的数值类型（integer、long、float等），字符串类型无法进行求和聚合；
• 如果你使用的是Searchkit v2版本，写法略有不同，需要使用Aggregation组件并指定type: 'sum'：

  <Aggregation
    id="total-sum"
    type="sum"
    field="montant"
    label="总金额"
  />
  

内容的提问来源于stack exchange，提问作者MChaker