Merge pull request #10197 from kodadot/POC-gql-tada

[Maintanence + DX] - delete old queries and POC gql-tada

.gitignore

@@ -95,3 +95,6 @@ sitemap.xml
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+
+queries/clients/*.d.ts

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "deno.enable": false,
+  "deno.enable": false,  
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+
 }

components/Navbar.vue

@@ -121,13 +121,6 @@
             :chain="urlPrefix"
             @select="showMobileNavbar" />
 
-          <!-- commenting as part of #5889-->
-          <!-- <StatsDropdown
-          class="navbar-stats custom-navbar-item"
-          data-testid="stats"
-          :is-mobile="isMobile"
-          :chain="urlPrefix" /> -->
-
           <MobileExpandableSection
             v-slot="{ onCloseMobileSubMenu }"
             class="lg:!hidden"

components/collection/CollectionHeader/CollectionBanner.vue

@@ -39,17 +39,19 @@ import { sanitizeIpfsUrl, toOriginalContentUrl } from '@/utils/ipfs'
 import HeroButtons from '@/components/collection/HeroButtons.vue'
 import { generateCollectionImage } from '@/utils/seoImageGenerator'
 import { convertMarkdownToText } from '@/utils/markdown'
-
+import collectionById from '@/queries/subsquid/general/collectionById.query'
 const NuxtImg = resolveComponent('NuxtImg')
 
 const collectionId = computed(() => route.params.id as string)
 const route = useRoute()
+const { client } = usePrefix()
 
-const { data, refetch } = useGraphql({
-  queryName: 'collectionById',
+const { data, refresh: refetch } = useAsyncQuery({
+  query: collectionById,
   variables: {
     id: collectionId.value,
   },
+  clientId: client.value,
 })
 
 const collectionAvatar = ref('')
@@ -60,9 +62,7 @@ const bannerImageUrl = computed(
 )
 
 watch(collectionId, () => {
-  refetch({
-    id: collectionId.value,
-  })
+  refetch()
   collectionAvatar.value = ''
 })
 
@@ -76,7 +76,9 @@ watchEffect(async () => {
     collectionAvatar.value = sanitizeIpfsUrl(image)
     collectionName.value = name
   } else {
-    const meta = (await processSingleMetadata(metadata)) as NFTMetadata
+    const meta = (await processSingleMetadata(
+      metadata as string,
+    )) as NFTMetadata
     const metaImage = sanitizeIpfsUrl(meta?.image)
     const metaName = meta?.name
 
@@ -93,21 +95,21 @@ watchEffect(async () => {
 useSeoMeta({
   title: collectionName,
   description: () =>
-    convertMarkdownToText(data.value?.collectionEntity.meta?.description),
+    convertMarkdownToText(data.value?.collectionEntity?.meta?.description),
   ogUrl: route.path,
   ogTitle: collectionName,
   ogDescription: () =>
-    convertMarkdownToText(data.value?.collectionEntity.meta?.description),
+    convertMarkdownToText(data.value?.collectionEntity?.meta?.description),
   ogImage: () =>
     generateCollectionImage(
       collectionName.value,
-      data.value?.nftEntitiesConnection.totalCount,
+      data.value?.nftEntitiesConnection?.totalCount,
       collectionAvatar.value,
     ),
   twitterImage: () =>
     generateCollectionImage(
       collectionName.value,
-      data.value?.nftEntitiesConnection.totalCount,
+      data.value?.nftEntitiesConnection?.totalCount,
       collectionAvatar.value,
     ),
 })

components/collection/utils/useCollectionDetails.ts

@@ -2,6 +2,7 @@ import { getVolume } from '@/utils/math'
 import { NFT } from '@/components/rmrk/service/scheme'
 import { NFTListSold } from '@/components/identity/utils/useIdentity'
 import { Stats } from './types'
+import collectionBuyEventStatsById from '@/queries/subsquid/general/collectionBuyEventStatsById.query'
 
 export const useCollectionDetails = ({
   collectionId,
@@ -57,9 +58,8 @@ export const useCollectionDetails = ({
 }
 
 export const useBuyEvents = ({ collectionId }) => {
-  const { data } = useGraphql({
-    queryPrefix: 'subsquid',
-    queryName: 'collectionBuyEventStatsById',
+  const { data } = useAsyncQuery({
+    query: collectionBuyEventStatsById,
     variables: {
       id: collectionId,
     },

components/common/NotificationBox/useNotification.ts

@@ -1,6 +1,7 @@
 import { Event, FilterOption } from './types'
 import { Interaction as _Interaction } from '@kodadot1/minimark/v1'
 import { sortedEventByDate } from '@/utils/sorting'
+import collectionByAccountQuery from '@/queries/subsquid/general/collectionByAccount.query'
 
 export const Interaction = {
   SALE: _Interaction.BUY,
@@ -41,8 +42,8 @@ export const useNotification = () => {
     return block.number.toNumber()
   }
 
-  const { data: collectionData } = useGraphql({
-    queryName: 'collectionByAccount',
+  const { data: collectionData } = useAsyncQuery({
+    query: collectionByAccountQuery,
     variables: {
       account: accountId.value,
     },
@@ -56,7 +57,10 @@ export const useNotification = () => {
   })
 
   watch(collectionData, (result) => {
-    collections.value = result.collectionEntities ?? []
+    collections.value = result.collectionEntities.map((collection) => ({
+      id: collection.id,
+      name: collection.name ?? '',
+    }))
   })
 
   watch(eventData, async (result) => {