Merge pull request #11491 from kodadot/refactor--asyncdata-already-mounted-part-3

fix: asyncdata already mounted part 3

Author: preschian

components/carousel/CarouselTypeGenerative.vue

@@ -1,25 +1,40 @@
 <template>
   <div ref="carouselDrop">
     <CarouselIndex
+      v-if="data.value.length"
       data-testid="generative-activity"
       :title="$t('general.generativeArt')"
-      :nfts="nfts.value"
+      :nfts="data.value"
       action-type="pagination"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useElementVisibility } from '@vueuse/core'
-import { useCarouselGenerativeNftEvents } from './utils/useCarouselEvents'
+import { unionBy } from 'lodash'
+import { useEvents, sortNfts } from './utils/useCarouselEvents'
 import { useProfileOnboardingStore } from '@/stores/profileOnboarding'
 
-const nfts = useCarouselGenerativeNftEvents()
+const props = defineProps<{
+  collectionIds: string[]
+}>()
+
 const carouselDrop = ref()
 
 watch([useElementVisibility(carouselDrop)], ([isVisible]) => {
   if (isVisible) {
     useProfileOnboardingStore().setCarouselVisited()
   }
 })
+
+const LIMIT = 12
+const { data: ahpEventsNewestList } = useEvents('ahp', 'newestList', LIMIT, props.collectionIds)
+const { data: ahpEventsLatestSales } = useEvents('ahp', 'latestSales', LIMIT, props.collectionIds)
+
+const data = computed(() => {
+  const ahpEvents = [...ahpEventsNewestList.value, ...ahpEventsLatestSales.value]
+
+  return sortNfts(unionBy(ahpEvents, 'id')).nfts
+})
 </script>

components/carousel/utils/useCarouselEvents.ts

@@ -1,10 +1,8 @@
 import type { Prefix } from '@kodadot1/static'
-import unionBy from 'lodash/unionBy'
+import type { ResultOf } from 'gql.tada'
 import type { CarouselNFT } from '@/components/base/types'
 import type { NFTWithMetadata } from '@/composables/useNft'
 import { formatNFT } from '@/utils/carousel'
-import { AHK_GENERATIVE_DROPS } from '@/utils/drop'
-import { getDrops } from '@/services/fxart'
 import latestEvents from '@/queries/subsquid/general/latestEvents'
 
 interface Types {
@@ -27,6 +25,7 @@ const fetchLatestEvents = async (chain, type, where = {}, limit = 20) => {
         ...nftEventVariables[type],
         ...where,
       },
+      chain,
     },
     context: {
       endpoint: chain,
@@ -52,7 +51,7 @@ const createEventQuery = (
 
 const LIMIT_PER_COLLECTION = 3
 
-const useEvents = (chain, type, limit = 10, collectionIds = []) => {
+export const useEvents = (chain, type, limit = 10, collectionIds) => {
   const collections = reactive({})
   const items = ref<
     (NFTWithMetadata & {
@@ -79,7 +78,7 @@ const useEvents = (chain, type, limit = 10, collectionIds = []) => {
     collectionIds,
   )
 
-  const data = ref()
+  const data = ref<ResultOf<typeof latestEvents>>()
   fetchLatestEvents(chain, type, where).then((result) => {
     data.value = result.data
   })
@@ -150,7 +149,7 @@ export const flattenNFT = (data, chain) => {
 
 const sortNftByTime = data => data.sort((a, b) => b.unixTime - a.unixTime)
 
-const sortNfts = (data) => {
+export const sortNfts = (data) => {
   const nfts = ref<CarouselNFT[]>([])
   nfts.value = sortNftByTime(data)
 
@@ -180,56 +179,3 @@ export const useCarouselNftEvents = ({ type }: Types) => {
 
   return computed(() => items.value.nfts)
 }
-
-const GENERATIVE_CONFIG: Partial<
-  Record<Prefix, { limit: number, collections: string[] }>
-> = {
-  ahp: {
-    limit: 12,
-    collections: [],
-  },
-  ahk: {
-    limit: 3,
-    collections: AHK_GENERATIVE_DROPS,
-  },
-}
-
-export const useCarouselGenerativeNftEvents = () => {
-  const nfts = ref<CarouselNFT[]>([])
-  const eventType = ['newestList', 'latestSales']
-  const dropsAhp = computedAsync(async () => {
-    return await getDrops({
-      limit: 12,
-      active: [true],
-      chain: ['ahp'],
-    })
-  })
-
-  const eventsDataRefs = Object.keys(GENERATIVE_CONFIG).map((chain) => {
-    let collections = GENERATIVE_CONFIG[chain].collections
-
-    if (isProduction && chain === 'ahk') {
-      return []
-    }
-
-    if (chain === 'ahp' && dropsAhp.value?.length) {
-      collections = dropsAhp.value.map(drop => drop.collection)
-    }
-
-    return eventType.map((eventName) => {
-      const { data } = useEvents(
-        chain,
-        eventName,
-        GENERATIVE_CONFIG[chain].limit,
-        collections,
-      )
-      return data
-    })
-  })
-
-  watchEffect(() => {
-    nfts.value = eventsDataRefs.flat().flatMap(dataRef => dataRef.value)
-  })
-
-  return computed(() => sortNfts(unionBy(nfts.value, 'id')).nfts)
-}

components/collection/utils/useCollectionDetails.ts

@@ -1,10 +1,12 @@
 import { useQuery } from '@tanstack/vue-query'
+import type { ResultOf } from 'gql.tada'
 import type { Stats } from './types'
 import { getVolume } from '@/utils/math'
-import type { NFT, NFTMetadata } from '@/types'
-import type { NFTListSold } from '@/components/identity/utils/useIdentity'
+import type { NFTMetadata } from '@/types'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import collectionBuyEventStatsById from '@/queries/subsquid/general/collectionBuyEventStatsById.query'
+import collectionStatsById from '@/queries/subsquid/general/collectionStatsById'
+import nftListSoldByCollection from '~/queries/subsquid/general/nftListSoldByCollection'
 
 export const useCollectionDetails = ({
   collectionId,
@@ -15,13 +17,26 @@ export const useCollectionDetails = ({
     id: collectionId.value,
   }))
 
-  const { data, refetch } = useGraphql({
-    queryPrefix: 'subsquid',
-    queryName: 'collectionStatsById',
-    variables: variables.value,
-  })
+  const { $apolloClient } = useNuxtApp()
+  const { urlPrefix } = usePrefix()
+
+  const data = ref<ResultOf<typeof collectionStatsById>>()
   const stats = ref<Stats>({})
 
+  const fetchStats = () => {
+    $apolloClient.query({
+      query: collectionStatsById,
+      variables: variables.value,
+      context: {
+        endpoint: urlPrefix.value,
+      },
+    }).then((res) => {
+      data.value = res.data
+    })
+  }
+
+  fetchStats()
+
   watch(data, () => {
     if (data.value?.stats) {
       const uniqueOwnerCount = [
@@ -33,12 +48,12 @@ export const useCollectionDetails = ({
       const listedNfts = data.value.stats.listed
 
       stats.value = {
-        maxSupply: data.value.stats.max,
+        maxSupply: data.value.stats.max ?? undefined,
         listedCount: data.value.stats.listed.length,
         collectionLength,
         collectionFloorPrice:
           listedNfts.length > 0
-            ? Math.min(...listedNfts.map(item => parseInt(item.price)))
+            ? Math.min(...listedNfts.map(item => parseInt(item.price ?? '0')))
             : undefined,
         uniqueOwners: uniqueOwnerCount,
         uniqueOwnersPercent: `${(
@@ -52,11 +67,11 @@ export const useCollectionDetails = ({
     }
   })
 
-  watch(variables, () => refetch(variables.value))
+  watch(variables, () => fetchStats())
 
   return {
     stats,
-    refetch,
+    refetch: fetchStats,
   }
 }
 
@@ -78,27 +93,27 @@ export const useBuyEvents = ({ collectionId }) => {
 }
 
 export function useCollectionSoldData({ address, collectionId }) {
-  const nftEntities = ref<NFT[]>([])
-  const { data } = useGraphql({
-    queryName: 'nftListSoldByCollection',
+  const data = ref<ResultOf<typeof nftListSoldByCollection>>()
+
+  const { $apolloClient } = useNuxtApp()
+  const { urlPrefix } = usePrefix()
+
+  $apolloClient.query({
+    query: nftListSoldByCollection,
     variables: {
       account: address,
       limit: 3,
       orderBy: 'price_DESC',
       collectionId,
-      where: {
-        collection: { id_eq: collectionId },
-      },
     },
+    context: {
+      endpoint: urlPrefix.value,
+    },
+  }).then((res) => {
+    data.value = res.data
   })
 
-  watch(data as unknown as NFTListSold, (list) => {
-    if (list?.nftEntities?.length) {
-      nftEntities.value = list.nftEntities
-    }
-  })
-
-  return { nftEntities }
+  return { nftEntities: computed(() => data.value?.nftEntities?.length ? data.value.nftEntities : []) }
 }
 
 export const useCollectionMinimal = ({

components/identity/utils/useIdentity.ts

@@ -1,8 +1,9 @@
 import { isAfter, subHours } from 'date-fns'
-
+import type { ResultOf } from 'gql.tada'
 import { useIdentityMintStore } from '@/stores/identityMint'
 import { formatToNow } from '@/utils/format/time'
 import buyEventByProfile from '@/queries/subsquid/general/buyEventByProfile.query'
+import userStatsByAccount from '~/queries/subsquid/general/userStatsByAccount'
 
 const useLastBought = ({ address }: { address: Ref<string> }) => {
   const lastBoughtDate = ref(new Date())
@@ -66,11 +67,26 @@ export default function useIdentityStats({
   const firstMintDate = ref(new Date())
 
   const { lastBoughtDate } = useLastBought({ address })
-  const { data: stats, loading } = useGraphql({
-    queryName: 'userStatsByAccount',
+
+  const { $apolloClient, $consola } = useNuxtApp()
+  const { urlPrefix } = usePrefix()
+  const stats = ref<ResultOf<typeof userStatsByAccount>>()
+  const loading = ref(true)
+
+  $apolloClient.query({
+    query: userStatsByAccount,
     variables: {
       account: address.value,
     },
+    context: {
+      endpoint: urlPrefix.value,
+    },
+  }).then((res) => {
+    stats.value = res.data
+    loading.value = false
+  }).catch(() => {
+    $consola.error('Error fetching identity stats')
+    loading.value = false
   })
 
   const startedMinting = computed(() => formatToNow(firstMintDate.value))

components/identity/utils/useIdentityStats.ts

@@ -18,7 +18,10 @@
       <section class="py-8 instance">
         <div class="container-fluid">
           <!-- generative  -->
-          <LazyCarouselTypeGenerative />
+          <LazyCarouselTypeGenerative
+            v-if="dropsAhp.length"
+            :collection-ids="dropsAhp"
+          />
         </div>
       </section>
 
@@ -39,6 +42,7 @@
 import type { Prefix } from '@kodadot1/static'
 import { openProfileCreateModal } from '@/components/profile/create/openProfileModal'
 import { useProfileOnboardingStore } from '@/stores/profileOnboarding'
+import { getDrops } from '@/services/fxart'
 
 const hiddenCarrouselPrefixes: Prefix[] = ['dot']
 const forbiddenPrefixesForTopCollections: Prefix[] = ['ksm', 'dot']
@@ -65,4 +69,11 @@ watchEffect(() => {
     }, 2000)
   }
 })
+
+const drops = await getDrops({
+  limit: 12,
+  active: [true],
+  chain: ['ahp'],
+})
+const dropsAhp = drops.map(drop => drop.collection)
 </script>

components/landing/LandingPage.vue

@@ -73,7 +73,7 @@ const statsRows = computed(() => [
   },
   {
     label: 'activity.estimatedValue',
-    value: stats.value.listedValue,
+    value: stats.value.listedValue.toString(),
     component: CommonTokenMoney,
   },
   {