schon/storefront/app/composables/adresses/useAddressAutocomplete.ts

import {AUTOCOMPLETE_ADDRESS} from "@graphql/mutations/addresses";
import type {IAddressAutocompleteResponse, IAddressCompleteResult} from "@types";

export function useAddressAutocomplete() {
  const { t } = useI18n();

  const query = ref('');
  const completeResults = ref<IAddressCompleteResult | null>(null);

  const { mutate, loading, error } = useMutation<IAddressAutocompleteResponse>(AUTOCOMPLETE_ADDRESS);

  async function complete(query: string) {
    completeResults.value = null;
    const result = await mutate({
      limit: 5,
      q: query,
    });

    if (result?.data?.autocompleteAddress) {
      completeResults.value = result.data.autocompleteAddress.suggestions

      return {
        results: result.data.autocompleteAddress.suggestions,
      };
    }
  }

  const debouncedComplete = useDebounceFn(async (val: string) => {
    if (!val) {
      completeResults.value = null;
      return;
    }

    await complete(val);
  }, 400);

  async function handleSearch(val: string) {
    await debouncedComplete(val);
  }

  watch(error, (err) => {
    if (!err) return;
    console.error('useAddressAutocomplete error:', err);
    let message = t('popup.errors.defaultError');
    if (isGraphQLError(err)) {
      message = err.graphQLErrors?.[0]?.message || message;
    } else {
      message = err.message;
    }
    $notify({
      message,
      type: 'error',
      title: t('popup.errors.main'),
    });
  });

  return {
    query,
    completeResults,
    loading,
    handleSearch
  };
}