@shopify/shop-minis-react/src/hooks/shop/useRecommendedShops.ts

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import {useMemo} from 'react'

import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
import {useShopActions} from '../../internal/useShopActions'
import {
  Shop,
  PaginatedDataHookOptionsBase,
  PaginatedDataHookReturnsBase,
} from '../../types'

interface UseRecommendedShopsParams extends PaginatedDataHookOptionsBase {}

interface UseRecommendedShopsReturns extends PaginatedDataHookReturnsBase {
  shops: Shop[] | null
}

export const useRecommendedShops = (
  params?: UseRecommendedShopsParams
): UseRecommendedShopsReturns => {
  const {getRecommendedShops} = useShopActions()

  const {skip, ...shopActionParamsToPass} = params || {}

  const {data, ...rest} = useShopActionInfiniteQuery(
    ['recommendedShops', shopActionParamsToPass],
    getRecommendedShops,
    shopActionParamsToPass,
    {skip}
  )

  const shops = useMemo(() => {
    if (!data) return null

    return Array.from(new Map(data.map(shop => [shop.id, shop])).values())
  }, [data])

  return {
    ...rest,
    shops,
  }
}