schon/storefront/app/composables/brands/useBrands.ts

import { GET_BRANDS } from '@graphql/queries/standalone/brands';
import type { IBrand, IBrandsResponse } from '@types';

interface IBrandArgs {
	brandAfter?: string;
	brandOrderBy?: string;
	brandName?: string;
	brandSearch?: string;
}

interface IBrandVars {
	brandFirst: number;
	brandAfter?: string;
	brandOrderBy?: string;
	brandName?: string;
	brandSearch?: string;
}

export function useBrands(args: IBrandArgs = {}) {
	const variables = reactive<IBrandVars>({
		brandFirst: 45,
		brandAfter: args.brandAfter,
		brandOrderBy: args.orderBy,
		brandName: args.brandName,
		brandSearch: args.brandSearch,
	});

	const pending = ref<boolean>(false);
	const brands = ref<IBrand[]>([]);
	const pageInfo = ref<{
		hasNextPage: boolean;
		endCursor: string;
	}>({
		hasNextPage: false,
		endCursor: '',
	});
	const error = ref<string | null>(null);

	const getBrands = async (): Promise<void> => {
		pending.value = true;

		const queryVariables = {
			brandFirst: variables.first,
			brandAfter: variables.brandAfter || undefined,
			brandOrderBy: variables.orderBy || undefined,
			brandName: variables.brandName || undefined,
			brandSearch: variables.brandSearch || undefined,
		};

		const { data, error: mistake } = await useAsyncQuery<IBrandsResponse>(GET_BRANDS, queryVariables);

		if (data.value?.brands?.edges) {
			pageInfo.value = data.value?.brands.pageInfo;

			if (variables.brandAfter) {
				brands.value = [
					...brands.value,
					...data.value.brands.edges,
				];
			} else {
				brands.value = data.value?.brands.edges;
			}
		}

		if (mistake.value) {
			error.value = mistake.value;
		}

		pending.value = false;
	};

	watch(error, (e) => {
		if (e) console.error('useBrands error:', e);
	});

	return {
		pending,
		brands,
		pageInfo,
		variables,
		getBrands,
	};
}