feat: add vanilla apollo client

components/create/CreateNft.vue

@@ -289,7 +289,6 @@
 
 <script setup lang="ts">
 import type { Prefix } from '@kodadot1/static'
-import type { Ref } from 'vue'
 import {
   NeoButton,
   NeoField,
@@ -307,13 +306,13 @@ import BasicSwitch from '@/components/shared/form/BasicSwitch.vue'
 import CustomAttributeInput from '@/components/create/CustomAttributeInput.vue'
 import RoyaltyForm from '@/components/create/RoyaltyForm.vue'
 import MintConfirmModal from '@/components/create/Confirm/MintConfirmModal.vue'
-import resolveQueryPath from '@/utils/queryPathResolver'
 import { availablePrefixes } from '@/utils/chain'
 import { balanceFrom } from '@/utils/balance'
 import { DETAIL_TIMEOUT } from '@/utils/constants'
 import { delay } from '@/utils/fetch'
 import type { AutoTeleportAction } from '@/composables/autoTeleport/types'
 import type { AutoTeleportActionButtonConfirmEvent } from '@/components/common/autoTeleport/AutoTeleportActionButton.vue'
+import nftByBlockNumber from '@/queries/subsquid/general/nftByBlockNumber'
 
 // composables
 const { $consola, $i18n } = useNuxtApp()
@@ -576,24 +575,31 @@ watchEffect(() => {
 // navigate to gallery detail page after success create nft
 const retry = ref(10) // max retry 10 times
 
-type NftId = {
-  nftEntities?: {
-    id: string
-  }[]
-}
-
+const { $apolloClient } = useNuxtApp()
 async function getNftId() {
-  const query = await resolveQueryPath(currentChain.value, 'nftByBlockNumber')
-  const { data }: { data: Ref<NftId> } = await useAsyncQuery({
-    query: query.default,
-    clientId: currentChain.value,
-    variables: {
-      limit: 1,
-      blockNumber: mintedBlockNumber.value,
-    },
-  })
+  try {
+    const result = await $apolloClient.query({
+      query: nftByBlockNumber,
+      variables: {
+        limit: 1,
+        blockNumber: mintedBlockNumber.value,
+      },
+      context: {
+        endpoint: currentChain.value,
+      },
+    })
+
+    if (!result.data?.nftEntities?.length) {
+      $consola.warn('No NFT found for the given block number')
+      return null
+    }
 
-  return data.value.nftEntities?.[0]?.id
+    return result.data?.nftEntities[0].id
+  }
+  catch (error) {
+    $consola.error('Failed to fetch NFT ID:', error)
+    return null
+  }
 }
 
 watchEffect(async () => {

components/drops/useDrops.ts

@@ -1,7 +1,5 @@
 import { getDropAttributes } from './utils'
-import collectionByIdMinimal from '@/queries/subsquid/general/collectionByIdMinimal.graphql'
 import { chainPropListOf } from '@/utils/config/chain.config'
-import type { DropItem } from '@/params/types'
 import { prefixToToken } from '@/components/common/shoppingCart/utils'
 import { useDropStore } from '@/stores/drop'
 import { getChainName } from '@/utils/chain'
@@ -45,26 +43,6 @@ export function useDrop(alias?: string) {
   }
 }
 
-export const fetchDropMintedCount = async (
-  drop: Pick<DropItem, 'collection' | 'chain'>,
-): Promise<number> => {
-  if (!drop.collection || !drop.chain) {
-    return 0
-  }
-
-  const { data } = await useAsyncQuery<{
-    collectionEntityById: { nftCount: number | undefined }
-  }>({
-    query: collectionByIdMinimal,
-    variables: {
-      id: drop.collection,
-    },
-    clientId: drop.chain,
-  })
-
-  return data.value?.collectionEntityById?.nftCount ?? 0
-}
-
 export const useDropMinimumFunds = (amount = ref(1)) => {
   const { drop } = useDrop()
   const { urlPrefix } = usePrefix()

components/items/ItemsGrid/useItemsGrid.ts

@@ -4,13 +4,14 @@ import {
   useItemsGridQueryParams,
   useSearchParams,
 } from './utils/useSearchParams'
-import resolveQueryPath from '@/utils/queryPathResolver'
 import { getDenyList } from '@/utils/prefix'
 import type { NFTWithMetadata, TokenEntity } from '@/composables/useNft'
 import { nftToListingCartItem } from '@/components/common/shoppingCart/utils'
 import { useListingCartStore } from '@/stores/listingCart'
 import type { NFT, TokenId } from '@/types'
 import { fetchOdaToken } from '@/services/oda'
+import tokenListWithSearch from '@/queries/subsquid/general/tokenListWithSearch'
+import nftListWithSearch from '@/queries/subsquid/general/nftListWithSearch'
 
 const DEFAULT_RESET_SEARCH_QUERY_PARAMS = [
   'sort',
@@ -107,8 +108,8 @@ export function useFetchSearch({
     isFetchingData.value = true
 
     const queryName = useTokens.value
-      ? 'tokenListWithSearch'
-      : 'nftListWithSearch'
+      ? tokenListWithSearch
+      : nftListWithSearch
 
     const getRouteQueryOrderByDefault = (query, defaultValue: string[]) => {
       query = [query].filter(Boolean).flat() as string[]
@@ -185,15 +186,17 @@ export function useFetchSearch({
       ? { ...defaultSearchVariables, ...tokenQueryVariables }
       : { ...defaultSearchVariables, ...nftQueryVariables }
 
-    const query = await resolveQueryPath(client.value, queryName)
-    const { data: result } = await useAsyncQuery({
-      query: query.default,
+    const { $apolloClient } = useNuxtApp()
+    const { data: result } = await $apolloClient.query({
+      query: queryName,
       variables: queryVariables,
-      clientId: client.value,
+      context: {
+        endpoint: client.value,
+      },
     })
 
     // handle results
-    const { entities, count } = getQueryResults(result.value)
+    const { entities, count } = getQueryResults(result)
     total.value = count
 
     if (!loadedPages.value.includes(page)) {

composables/useUserStats.ts

@@ -1,27 +1,32 @@
-import resolveQueryPath from '@/utils/queryPathResolver'
-import type { InteractionWithNFT } from '@/composables/collectionActivity/types'
+import profileStatsByIdRefined from '@/queries/subsquid/general/profileStatsByIdRefined'
 
 export default () => {
   const { client, urlPrefix } = usePrefix()
   const { accountId } = useAuth()
+  const { $apolloClient } = useNuxtApp()
 
   const totalSpent = ref(0)
 
   const getUserStats = async () => {
-    const query = await resolveQueryPath(client.value, 'profileStatsById')
-    const { data } = await useAsyncQuery<{ invested: InteractionWithNFT[] }>({
-      query: query.default,
-      clientId: client.value,
+    const { data } = await $apolloClient.query({
+      query: profileStatsByIdRefined,
       variables: {
         id: accountId.value,
         denyList: getDenyList(urlPrefix.value),
       },
+      context: {
+        endpoint: client.value,
+      },
     })
 
-    const holdingsEvents = data.value?.invested.filter(
+    const holdingsEvents = data?.invested.filter(
       event => event.nft.currentOwner === accountId.value,
     )
 
+    if (!holdingsEvents) {
+      return
+    }
+
     totalSpent.value = Number(getSumOfObjectField(holdingsEvents, 'meta'))
   }
 

libs/ui/src/components/NeoMessage/NeoMessage.vue

@@ -79,8 +79,8 @@ const emit = defineEmits(['close', 'update:active', 'click'])
 const props = withDefaults(
   defineProps<{
     title?: string
-    active: boolean
-    closable: boolean
+    active?: boolean
+    closable?: boolean
     variant: NeoMessageVariant
     autoClose: boolean
     duration: number

package.json

@@ -51,6 +51,7 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
+    "@apollo/client": "^3.13.1",
     "@braintree/sanitize-url": "^6.0.4",
     "@farcaster/auth-client": "^0.3.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",

plugins/apollo.client.ts

@@ -0,0 +1,30 @@
+import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'
+import { URLS } from '@/utils/constants'
+
+export default defineNuxtPlugin(() => {
+  const GRAPHQL_ENDPOINTS = {
+    ahp: URLS.koda.speck,
+    ahk: URLS.koda.stick,
+  }
+
+  const customUri = new HttpLink({
+    uri: ({ getContext }) => {
+      const { endpoint } = getContext()
+      if (endpoint === 'ahk') {
+        return GRAPHQL_ENDPOINTS.ahk
+      }
+      return GRAPHQL_ENDPOINTS.ahp
+    },
+  })
+
+  const client = new ApolloClient({
+    link: customUri,
+    cache: new InMemoryCache(),
+  })
+
+  return {
+    provide: {
+      apolloClient: client,
+    },
+  }
+})