make it work with axios

packages/ui/components/DataFeeds.vue

@@ -20,7 +20,7 @@
 
 <script setup>
 import { formatSvgName } from '../utils/formatSvgName'
-// import feeds from '@/apollo/queries/feeds.gql'
+import { graphQLQuery } from '../services/api'
 
 const emit = defineEmits(['empty'])
 
@@ -37,7 +37,8 @@ const props = defineProps({
 
 const route = useRoute()
 
-const feedsQuery = gql`query feeds ($network: String!) {
+const feedsQuery = {
+  query: `query feeds ($network: String!) {
   feeds (network: $network) {
     feeds {
       feedFullName
@@ -56,21 +57,27 @@ const feedsQuery = gql`query feeds ($network: String!) {
     }
     total
   }
-}`
-
-const variables = { 
+}`,
+ variables: { 
   network: props.network.key.toLowerCase()
 }
+}
+
 
 // pollInterval: 60000,
 
-const feeds = await useAsyncQuery(feedsQuery, variables)
+const feedsCall = await graphQLQuery(feedsQuery)
+console.log('feedsCall//', feedsCall)
+const feeds = ref(feedsCall?.data?.data?.feeds)
+// const feeds = ref(null)
+console.log('-----feeds', feeds.value)
 // const currentPage = ref(1)
 // const itemsPerPage = ref(28)
 
 const allFeeds = computed(() => {
-  if (feeds.data.value.feeds) {
-    const adaptedFeeds = feeds.data.value.feeds.feeds
+  console.log('feeds.value', feeds)
+  if (feeds.value) {
+    const adaptedFeeds = feeds.value.feeds
       .filter((feed) => {
         return feed.lastResult && Number(feed.lastResultTimestamp) > 0
       })
@@ -113,7 +120,7 @@ watch(allFeeds, (allFeedsNew) => {
   if (allFeedsNew.length < 1) {
     emit('empty', props.networkIndex)
   }
-})
+}, { immediate: true })
 </script>
 
 <style lang="scss" scoped>

packages/ui/components/LandingPage.vue

@@ -19,53 +19,55 @@
 
 <script setup>
 import { generateSelectOptions } from '../utils/generateSelectOptions'
-const networksQuery = gql`
-  query networks {
+import { graphQLQuery } from '../services/api'
+const networksQuery = {
+  operationName: "networks",
+  query: `query networks {
     networks {
       label,
       key,
       chain,
       logo
     }
-  }`
+  }`,
+  variables: {}
+}
     
-const networksFetch = await useAsyncQuery(networksQuery)
-
-const variables = { network: 'all'}
+const networksFetch = await graphQLQuery(networksQuery)
+const networks = ref(networksFetch?.data?.data?.networks)
 
-      const feedsQuery = gql`
-        query homePageData {
-          feeds (network: "all") {
-            feeds {
-              chain
-            }
-            total
-          }
-        }`
-const feedsFetch = await useAsyncQuery(feedsQuery, variables)
+const feedsQuery = {
+  query:`query homePageData {
+    feeds (network: "all") {
+      feeds {
+        chain
+      }
+      total
+    }
+  }`,
+  variables: { network: 'all'}
+}
 
+const feedsFetch = await graphQLQuery(feedsQuery)
+const feeds = ref(
+  feedsFetch?.data?.feeds?.feeds
+)
 
 const chainsFeeds = computed(() => {
   return feeds || []
 })
 
-const networks = computed(() => {
-  return networksFetch?.data?.value?.networks
-})
 const networksLength = computed(() => {
   return networks.value ? networks.length : 0
 })
 
-const feeds = computed(() => {
-  return feedsFetch?.data?.value?.feeds?.feeds
-})
-
 const supportedChains = computed(() => {
       if (networks.value) {
         return Object.values(generateSelectOptions(networks.value))
           .filter((network) => network && network[0])
           .map((network) => {
             const chain = network[0].chain
+            console.log('feeds', feeds)
             return {
               name: chain,
               count:

packages/ui/components/Main.vue

@@ -41,36 +41,40 @@
 import { generateSelectOptions } from '../utils/generateSelectOptions'
 import { generateNavOptions } from '../utils/generateNavOptions'
 
+import { graphQLQuery } from '../services/api'
 const store = useNetwork()
 
 const emit = defineEmits(['set-network'])
 
-const networksQuery = gql`
-  query networks {
+const networksQuery = {
+  operationName: "networks",
+  query: `query networks {
     networks {
       label,
       key,
       chain,
       logo
     }
-  }`
+  }`,
+  variables: {}
+}
     
-const networksFetch = await useAsyncQuery(networksQuery)
-
-const networks = computed(() => {
-  return networksFetch?.data?.value?.networks
-})
+const networksFetch = await graphQLQuery(networksQuery)
+const networks = ref(networksFetch?.data?.data?.networks)
 
 const route = useRoute()
 const currentPage = ref(1)
 const currentNetwork = ref(route.params.network.toUpperCase())
 
 const selected = computed(() => {
+  console.log('store', store.selectedNetwork)
   return store.selectedNetwork
 })
 const options = computed(() => {  
+  console.log('networks', networks)
   if (networks.value) {
     const options = generateSelectOptions(unref(networks))
+    console.log('options', options)
     return options
   } else {
     return null
@@ -97,14 +101,15 @@ const network = computed(() => {
   emit('set-network', network.toUpperCase())
   return network
 })
-
+console.log('-------options', options)
 watch(() => options.value, (newOptions) => {
+  console.log('[[[[[[[[[[[[[[[]]]]]]]]]]]]]]]')
   if (newOptions) {
     setCurrentNetwork(newOptions)
   }
   const networks = newOptions?.[network.value]
   store.updateSelectedNetwork(networks)
-})
+}, { immediate: true })
 
 function updateOptions(index) {
   store.deleteEmptyNetwork({ index })

packages/ui/components/NavBar.vue

@@ -67,17 +67,6 @@ const query = {
 
 const response = await graphQLQuery(query)
 const networks = ref(response.data.data)
-      // const networksQuery = gql`
-      //   query networks {
-      //     networks {
-      //       label,
-      //       key,
-      //       chain,
-      //       logo
-      //     }
-      //   }`
-    
-// const networks = await useAsyncQuery(networksQuery)
 
 const hover = ref(false)
 const displayBox = ref(false)