Applying Filters to the Category Page?

[datvnn (Đạt Nguyễn)]

I am using custom connector with search-ui-elasticsearch-connector for Nextjs.
I'm having a problem with the category page section

# /category/[category].tsx
const categoryPageconfig = (category) => ({
  ...Config,
  searchQuery: {
    ...Config.searchQuery,
    filters: [{ field: 'parent_category', values: [category] }],
    facets: {
      ...Config.searchQuery.facets,
      price: {
        type: 'range',
        ranges: [
          { from: 0, to: 200000, name: 'Under 200.000' },
          { from: 200000, to: 500000, name: '200.000 to 500.000' },
          { from: 500000, to: 1000000, name: '500.000 to 1.000.000' },
          { from: 1000000, to: 2000000, name: '1.000.000 to 2.000.0000' },
          { from: 2000000, to: 5000000, name: '2.000.000 to 5.000.000' },
          { from: 5000000, name: '5.000.000 & Above' },
        ],
      },
    },
  },
});

export default function CategoryPage(props) {
  const router = useRouter();
  const { category } = router.query;
  # const category = props?.match?.params.category;

  return (
    <>
      <BrowseHeader category={category} />
      <SearchProvider config={categoryPageconfig(category)}>
       ...
      </SearchProvider>
    </>
  );
}

And error message

TS2322: Type '{ searchQuery: { filters: { field: string; values: any[]; }[]; facets: { price: { type: string; ranges: ({ from: number; to: number; name: string; } | { from: number; name: string; to?: undefined; })[]; }; categories: { ...; }; manufacturer: { ...; }; rating: { ...; }; }; result_fields: { ...; }; disjunctiveFacets: ...' is not assignable to type 'SearchDriverOptions'.   Types of property 'searchQuery' are incompatible.     Type '{ filters: { field: string; values: any[]; }[]; facets: { price: { type: string; ranges: ({ from: number; to: number; name: string; } | { from: number; name: string; to?: undefined; })[]; }; categories: { type: string; size: number; }; manufacturer: { ...; }; rating: { ...; }; }; result_fields: { ...; }; disjunctive...' is not assignable to type 'SearchQuery'.       Type '{ filters: { field: string; values: any[]; }[]; facets: { price: { type: string; ranges: ({ from: number; to: number; name: string; } | { from: number; name: string; to?: undefined; })[]; }; categories: { type: string; size: number; }; manufacturer: { ...; }; rating: { ...; }; }; result_fields: { ...; }; disjunctive...' is not assignable to type '{ conditionalFacets?: Record<string, ConditionalRule>; filters?: Filter[]; facets?: Record<string, FacetConfiguration>; disjunctiveFacets?: string[]; disjunctiveFacetsAnalyticsTags?: string[]; result_fields?: Record<...>; search_fields?: Record<...>; }'.         Types of property 'filters' are incompatible.           Type '{ field: string; values: any[]; }[]' is not assignable to type 'Filter[]'.             Property 'type' is missing in type '{ field: string; values: any[]; }' but required in type 'Filter'.  index.d.ts(29, 5): 'type' is declared here. SearchProvider.d.ts(9, 5): The expected type comes from property 'config' which is declared here on type 'IntrinsicAttributes & SearchProviderProps'

This error occurs when I consume data from my Elasticsearch. So what is parent_category and do I have to create that field in Elastichsearch's index?

[datvnn (Đạt Nguyễn)]

I solved it by adding type: 'all' as const. And parent_category should also be in your index.

filters: [
       {
         field: 'parent_category',
         type: 'all' as const,
         values: [category],
       },
     ],