Is TransformItems incorrectly typed?

[Rigo-m]

/**
 * Transforms the given items.
 */
export type TransformItems<TItem, TMetadata = TransformItemsMetadata> = (
  items: TItem[],
  metadata: TMetadata
) => TItem[];

If I want to pass a function like (items => items.map(item => item.someProperty)) it fails on me, because the return type from transform items except TItem to be returned as it was. Is this correct?

[Haroenv]

Not sure what you are trying to achieve by just returning item.someProperty. You can add keys, transform keys, but all the existing keys still need to exist, otherwise InstantSearch will not render correctly. Do you have the exact code you're trying to use?

[yuriystasiv]

@Haroenv I believe I’m facing a similar issue when using the nuxt-swiftsearch module by @Rigo-m. I’m trying to pass a custom component that requires a different structure for the items array. Here’s an example:

<template>
  <AisInstantSearch
    :widgets
    :configuration
  >
    <AisRefinementList attribute="size">
      <template #default="{ items }">
        <MyCustomComponent :items="items" />
      </template>
    </AisRefinementList>
  </AisInstantSearch>
</template>

<script lang="ts" setup>
type Size = {
  label: string;
  value: string;
  checked?: boolean;
};
const configuration = {};
const widgets = computed(() => [
  useAisRefinementList({
    attribute: 'size',
    transformItems: (items): Size[] => {
      return items.map((item) => {
        return {
          value: item.value,
          label: item.label,
          checked: item.isRefined,
        };
      });
    },
  }),
]);
</script>

However, I encountered this error because the transformItems property always expects the same structure for the transformed items:

Type '(items: RefinementListItem[]) => Size[]' is not assignable to type 'TransformItems<RefinementListItem>'.
  Type 'Size[]' is not assignable to type 'RefinementListItem[]'.ts(2322)
connectRefinementList.d.ts(64, 5): The expected type comes from property 'transformItems' which is declared here on type 'RefinementListConnectorParams'

It seems that the transformItems function must return an array of the type RefinementListItem, but I need to use a custom structure (Size[]). Do you have any recommendations for handling this use case, or is there a workaround to make this work with a custom items array structure?

[Haroenv]

Indeed when using a connector this option may be less useful (it's mainly intended for use in the builtin widget or changing the label). I think there's these possible solutions:

1. add your new keys as well as the existing RefinementListItem ones (even if you don't need them)
2. cast the output of your transformItems to RefinementListItem (which would be lying to typescript)
3. map in render or computed instead of using transformItems and keep the RefinementListItem as-is