如何在Angular中为Directus CMS请求添加额外过滤器

我在从Directus CMS获取职位招聘信息时，碰到了无法给请求URL添加额外搜索查询字段的问题。现有获取职位的函数代码如下：

getCareerOffers() {
  return this.getItems<CareerOffer>('career_offers', ['*', 'image.*', 'content_side_image.*']);
}

查阅Directus文档后，得知可以添加形如[comparator][eq]格式的查询过滤器，示例写法如下：

getCareerOffers() {
  return this.getItems<CareerOffer>('career_offers', ['*', 'image.*', 'content_side_image.*'], {
    '[company][eq]': 'company',
  });
}

但getItems函数的参数处理逻辑有问题，导致过滤器无法正确格式化。当前getItems函数代码：

private getItems<T>(collection: string, fields?: string[], filter?: Record<string, string>): Observable<T[]> {
    if (!this.cachedObservables[collection]) {

      const prefixedFilters = {}

      const params = {
        ...(fields ? { fields: fields.join() } : prefixedFilters),
        filter: Object.keys(filter).reduce((filtersKey) => {
          const prefixedFilterKey = `filters${filtersKey}`

          prefixedFilters[prefixedFilterKey] = filter[filtersKey]
        }),
      };

      this.cachedObservables[collection] = this.http
        .get<CmsItems<T[]>>(`${this.apiUrl}/items/${collection}`, { params })
        .pipe(
          map(response => response.data),
          publishReplay(1),
          refCount(),
        );
    }

    return this.cachedObservables[collection];
  }

现在卡在params对象的过滤器格式化部分，Object.keys(filter)返回的数组中包含[company][eq]这个键，不知道如何正确处理。

问题分析 #

1. reduce方法使用错误：缺少累加器初始值，且没有返回累加后的结果，导致过滤器处理逻辑完全失效
2. 过滤器格式理解错误：Directus的URL参数中，过滤器的正确格式是filter[company][eq]=xxx，而非自定义的filters[company][eq]前缀

修正后的getItems函数 #

private getItems<T>(collection: string, fields?: string[], filter?: Record<string, string>): Observable<T[]> {
    if (!this.cachedObservables[collection]) {
      // 构建请求参数
      const params: Record<string, any> = {};

      // 处理字段参数
      if (fields) {
        params.fields = fields.join(',');
      }

      // 处理过滤器参数
      if (filter) {
        Object.entries(filter).forEach(([key, value]) => {
          // 把传入的`[company][eq]`转换成`filter[company][eq]`格式的参数键
          params[`filter${key}`] = value;
        });
      }

      this.cachedObservables[collection] = this.http
        .get<CmsItems<T[]>>(`${this.apiUrl}/items/${collection}`, { params })
        .pipe(
          map(response => response.data),
          publishReplay(1),
          refCount(),
        );
    }

    return this.cachedObservables[collection];
  }

关键修改点 #

• 移除冗余的prefixedFilters对象，直接构建params对象
• 用Object.entries遍历过滤器键值对，把传入的[company][eq]拼接成filter[company][eq]作为参数键，符合Directus的API参数格式
• 修复原reduce方法的逻辑错误，改用更直观的forEach处理过滤器
• 增加filter参数的存在性判断，避免空值报错

验证请求格式 #

调用getCareerOffers时，最终生成的URL参数会是：
fields=*,image.*,content_side_image.*&filter[company][eq]=company
完全符合Directus的API要求，能正确过滤出指定公司的职位信息。

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