make it work with axios

packages/ui/components/DataFeedDescription.vue

@@ -1,7 +1,7 @@
 <template>
   <i18n-t :keypath="description.i18nPath" tag="p" class="feed-description" scope="global">
     <template v-for="field in description.fields" #[field] :key="field.i18nPath">
-      <span :key="field.i18nPath" class="bold">{{ fieldToProp[field] }}</span>
+      <span :key="field" class="bold">{{ fieldToProp[field] }}</span>
     </template>
   </i18n-t>
 </template>

packages/ui/components/DataFeedDetails.vue

@@ -1,6 +1,7 @@
 <template>
   <div> {{ lastResultValue }}</div>
   <div v-if="normalizedFeed" class="content">
+
     <LazyChart
       v-if="normalizedFeed"
       class="chart"
@@ -59,16 +60,13 @@
 </template>
 
 <script setup>
-// import feed from '@/apollo/queries/feed.gql'
-// import requests from '@/apollo/queries/requests.gql'
 import { getWitnetBlockExplorerLink } from '@/utils/getWitnetBlockExplorerLink'
 import { CHART_RANGE } from '@/constants'
 import { formatTimestamp } from '@/utils/formatTimestamp'
 import { formatNumber } from '@/utils/formatNumber'
 import { formatMilliseconds } from '@/utils/formatMilliseconds'
 import { getTimestampByRange } from '@/utils/getTimestampByRange.js'
-
-const vm = getCurrentInstance();
+import { graphQLQuery } from '../services/api'
 
 const store = useNetwork()
 const route = useRoute()
@@ -84,7 +82,14 @@ const feedFullName = ref(route.params.id)
     
 const variables = { timestamp: timestamp.value, feedFullName: feedFullName.value }
 
-const requestsQuery = gql`
+// pollInterval: 60000,
+const requestsVariables = {
+  feedFullName: feedFullName.value,
+  page: currentPage.value,
+  size: itemsPerPage.value,
+}
+const requestsQuery = {
+  query: `
 query requests($feedFullName: String!, $page: Int!, $size: Int!) {
   requests(feedFullName: $feedFullName, page: $page, size: $size) {
     feedFullName
@@ -93,15 +98,12 @@ query requests($feedFullName: String!, $page: Int!, $size: Int!) {
     requestId
     timestamp
   }
-}`
-
-// pollInterval: 60000,
-const requestsVariables = {
-  feedFullName: feedFullName.value,
-  page: currentPage.value,
-  size: itemsPerPage.value,
+}`,
+variables: requestsVariables
 }
-const feedQuery = gql`
+
+const feedQuery = {
+  query: `
   query feed($feedFullName: String!, $timestamp: Int!) {
     feed(feedFullName: $feedFullName) {
       feedFullName 
@@ -130,20 +132,27 @@ const feedQuery = gql`
       color
       logo
     }
-  }`
+  }`,
+  variables,
+}
 
 
 // pollInterval: 60000,
-const feed = await useAsyncQuery(feedQuery, variables)
-const requests = await useAsyncQuery(requestsQuery, requestsVariables)
+const feedCall = await graphQLQuery(feedQuery)
+const requestsCall = await graphQLQuery(requestsQuery)
+console.log('feedCall', feedCall.data.data)
+console.log('requestsCall', requestsCall.data.data)
+const feed = ref(feedCall.data.data)
+const requests = ref(requestsCall.data.data)
 
 // const small = computed(() => {
 //   return numberOfPages.value > 10
 // })
 
 const normalizedFeed = computed(() => {
-  if (feed.data.value) {
-    const adaptedFeed = feed.data.value.feed
+  if (feed.value) {
+    const adaptedFeed = feed.value.feed
+    // console.log('adaptedFeed', feed)
     emit('feed-name', adaptedFeed.name.toUpperCase())
     emit('network', adaptedFeed.networkName)
     return {
@@ -197,7 +206,7 @@ const feedTimeToUpdate = computed(() => {
   //       $i18n.locale
   //     )
   //   : null
-  return null
+  return ""
 })
 const lastResultValue = computed(() => {
   if (normalizedFeed.value) {
@@ -224,8 +233,8 @@ const numberOfPages = computed(() => {
     : 0
 })
 const chartData = computed(() => {
-  if (feed.data.value.feed && feed.data.value.feed.requests.length > 0) {
-    return feed.data.value.feed.requests
+  if (feed.value.feed && feed.value.feed.requests.length > 0) {
+    return feed.value.feed.requests
       .map((request) => {
         return {
           time: Number(request.timestamp),
@@ -239,12 +248,13 @@ const chartData = computed(() => {
   }
 })
 const transactions = computed(() => {
-  if (feed.data.value && requests.data.value && requests.data.value.requests.length > 0) {
-    return requests.data.value.requests.map((request) => ({
+
+  if (feed.value && requests.value && requests.value.requests.length > 0) {
+    return requests.value.requests.map((request) => ({
       witnetLink: getWitnetBlockExplorerLink(request.drTxHash),
       drTxHash: request.drTxHash,
       data: {
-        label: feed.data.value.feed.label,
+        label: feed.value.feed.label,
         value: request.result,
         decimals: normalizedFeed.value.decimals,
       },

packages/ui/components/chart/Chart.vue

@@ -6,7 +6,7 @@
       :last-result-value="lastResultValue"
       :last-result-timestamp="lastResultTimestamp"
       :time-to-update="timeToUpdate"
-    />
+    /> 
     <div class="switcher">
       <div
         v-for="serie in ranges"