directly hit Aquarius API for front-page queries (#262)

* directly hit Aquarius for front-page queries

* refactor, use custom queryMetadata util

* parallelize front-page queries

src/components/pages/Home.tsx

@@ -1,12 +1,8 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import SearchBar from '../molecules/SearchBar'
 import styles from './Home.module.css'
-import { MetadataCache, Logger } from '@oceanprotocol/lib'
 import AssetQueryList from '../organisms/AssetQueryList'
-import {
+import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
-  QueryResult,
-  SearchQuery
-} from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
 import Container from '../atoms/Container'
 import Loader from '../atoms/Loader'
 import { useOcean } from '@oceanprotocol/react'
@@ -15,6 +11,8 @@ import Bookmarks from '../molecules/Bookmarks'
 import listPartners from '@oceanprotocol/list-datapartners'
 import Tooltip from '../atoms/Tooltip'
 import AssetQueryCarousel from '../organisms/AssetQueryCarousel'
+import axios from 'axios'
+import { queryMetadata } from '../../utils/aquarius'
 
 const partnerAccounts = listPartners
   .map((partner) => partner.accounts.join(','))
@@ -61,16 +59,6 @@ const queryLatest = {
   sort: { created: -1 }
 }
 
-async function getAssets(query: SearchQuery, metadataCacheUri: string) {
-  try {
-    const metadataCache = new MetadataCache(metadataCacheUri, Logger)
-    const result = await metadataCache.queryMetadata(query)
-    return result
-  } catch (error) {
-    Logger.error(error.message)
-  }
-}
-
 function LoaderArea() {
   return (
     <div className={styles.loaderWrap}>
@@ -79,17 +67,41 @@ function LoaderArea() {
   )
 }
 
-function SectionQuery({
+function SectionQueryResult({
   title,
-  result,
+  query,
-  loading,
   action
 }: {
   title: ReactElement | string
-  result: QueryResult
+  query: any
-  loading: boolean
   action?: ReactElement
 }) {
+  const { config } = useOcean()
+  const [result, setResult] = useState<QueryResult>()
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!config?.metadataCacheUri) return
+
+    const source = axios.CancelToken.source()
+
+    async function init() {
+      // TODO: remove any once ocean.js has nativeSearch typings
+      const result = await queryMetadata(
+        query as any,
+        config.metadataCacheUri,
+        source.token
+      )
+      setResult(result)
+      setLoading(false)
+    }
+    init()
+
+    return () => {
+      source.cancel()
+    }
+  }, [config?.metadataCacheUri, query])
+
   return (
     <section className={styles.section}>
       <h3>{title}</h3>
@@ -106,37 +118,30 @@ function SectionQuery({
 export default function HomePage(): ReactElement {
   const { config } = useOcean()
 
-  const [queryResultLatest, setQueryResultLatest] = useState<QueryResult>()
   const [queryResultPartners, setQueryResultPartners] = useState<QueryResult>()
-  const [queryResultHighest, setQueryResultHighest] = useState<QueryResult>()
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     if (!config?.metadataCacheUri) return
 
-    // TODO: remove any once ocean.js has nativeSearch typings
+    const source = axios.CancelToken.source()
-    async function init() {
-      const queryResultHighest = await getAssets(
-        queryHighest as any,
-        config.metadataCacheUri
-      )
-      setQueryResultHighest(queryResultHighest)
 
-      const queryResultPartners = await getAssets(
+    async function init() {
+      // TODO: remove any once ocean.js has nativeSearch typings
+      const queryResultPartners = await queryMetadata(
         queryPartners as any,
-        config.metadataCacheUri
+        config.metadataCacheUri,
+        source.token
       )
       setQueryResultPartners(queryResultPartners)
-
-      const queryResultLatest = await getAssets(
-        queryLatest as any,
-        config.metadataCacheUri
-      )
-      setQueryResultLatest(queryResultLatest)
       setLoading(false)
     }
     init()
-  }, [config.metadataCacheUri])
+
+    return () => {
+      source.cancel()
+    }
+  }, [config?.metadataCacheUri])
 
   return (
     <>
@@ -178,16 +183,14 @@ export default function HomePage(): ReactElement {
         <Bookmarks />
       </section>
 
-      <SectionQuery
+      <SectionQueryResult
         title="Highest Liquidity Pools"
-        loading={loading}
+        query={queryHighest}
-        result={queryResultHighest}
       />
 
-      <SectionQuery
+      <SectionQueryResult
         title="New Data Sets"
-        loading={loading}
+        query={queryLatest}
-        result={queryResultLatest}
         action={
           <Button style="text" to="/search">
             All data sets →

src/utils/aquarius.ts

@@ -0,0 +1,53 @@
+import { DDO, Logger } from '@oceanprotocol/lib'
+import {
+  QueryResult,
+  SearchQuery
+} from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
+import axios, { CancelToken, AxiosResponse } from 'axios'
+
+// TODO: import directly from ocean.js somehow.
+// Transforming Aquarius' direct response is needed for getting actual DDOs
+// and not just strings of DDOs. For now, taken from
+// https://github.com/oceanprotocol/ocean.js/blob/main/src/metadatacache/MetadataCache.ts#L361-L375
+export function transformQueryResult(
+  {
+    results,
+    page,
+    total_pages: totalPages,
+    total_results: totalResults
+  }: any = {
+    result: [],
+    page: 0,
+    total_pages: 0,
+    total_results: 0
+  }
+): QueryResult {
+  return {
+    results: (results || []).map((ddo: DDO) => new DDO(ddo as DDO)),
+    page,
+    totalPages,
+    totalResults
+  }
+}
+
+export async function queryMetadata(
+  query: SearchQuery,
+  metadataCacheUri: string,
+  cancelToken: CancelToken
+): Promise<QueryResult> {
+  try {
+    const response: AxiosResponse<QueryResult> = await axios.post(
+      `${metadataCacheUri}/api/v1/aquarius/assets/ddo/query`,
+      { ...query, cancelToken }
+    )
+    if (!response || response.status !== 200 || !response.data) return
+
+    return transformQueryResult(response.data)
+  } catch (error) {
+    if (axios.isCancel(error)) {
+      Logger.log(error.message)
+    } else {
+      Logger.error(error.message)
+    }
+  }
+}