get all assets from GraphQL

src/@types/MetaData.d.ts

@@ -23,3 +23,8 @@ export interface MetaDataMarket extends MetaData {
 export interface ServiceMetaDataMarket extends ServiceMetadata {
   attributes: MetaDataMarket
 }
+
+// type for assets pulled into GraphQL
+export interface OceanAsset extends MetaDataMarket {
+  did: DID
+}

src/components/pages/Home.tsx

@@ -1,31 +1,25 @@
-import React, { ReactElement, useState, useEffect } from 'react'
+import React, { ReactElement } from 'react'
 import SearchBar from '../molecules/SearchBar'
 import { DID } from '@oceanprotocol/squid'
 import { Link } from 'gatsby'
 import shortid from 'shortid'
-import axios from 'axios'
+import { OceanAsset } from '../../@types/MetaData'
-import { config } from '../../config/ocean'
-
-export default function HomePage(): ReactElement {
-  const [assets, setAssets] = useState<DID[]>()
-
-  useEffect(() => {
-    async function init() {
-      const result = await axios(`${config.aquariusUri}/api/v1/aquarius/assets`)
-      const assets = result.data.ids
-      setAssets(assets)
-    }
-    init()
-  }, [])
 
+export default function HomePage({
+  assets
+}: {
+  assets: {
+    node: OceanAsset
+  }[]
+}): ReactElement {
   return (
     <>
       <SearchBar large />
       {assets && (
         <ul>
-          {assets.map((did: DID) => (
+          {assets.map(({ node }: { node: { did: DID } }) => (
             <li key={shortid.generate()}>
-              <Link to={`/asset/${did}`}>{did}</Link>
+              <Link to={`/asset/${node.did}`}>{node.did}</Link>
             </li>
           ))}
         </ul>

src/components/templates/AssetDetails.tsx

@@ -4,11 +4,11 @@ import Layout from '../Layout'
 import AssetContent from '../organisms/AssetContent'
 
 export default function AssetDetailsTemplate(props: PageProps): ReactElement {
-  const { asset } = props.data as any
+  const { oceanAsset } = props.data as any
 
   return (
-    <Layout title={asset.main.name} uri={props.path}>
+    <Layout title={oceanAsset.main.name} uri={props.path}>
-      <AssetContent did={asset.did} metadata={asset} />
+      <AssetContent did={oceanAsset.did} metadata={oceanAsset} />
     </Layout>
   )
 }

src/pages/index.tsx

@@ -1,15 +1,28 @@
 import React, { ReactElement } from 'react'
-import { PageProps } from 'gatsby'
+import { PageProps, graphql } from 'gatsby'
 import PageHome from '../components/pages/Home'
 import { useSiteMetadata } from '../hooks/useSiteMetadata'
 import Layout from '../components/Layout'
 
 export default function PageGatsbyHome(props: PageProps): ReactElement {
   const { siteTitle, siteTagline } = useSiteMetadata()
+  const assets = (props.data as any).allOceanAsset.edges
 
   return (
     <Layout title={siteTitle} description={siteTagline} uri={props.uri}>
-      <PageHome />
+      <PageHome assets={assets} />
     </Layout>
   )
 }
+
+export const pageQuery = graphql`
+  query PageHomeQuery {
+    allOceanAsset {
+      edges {
+        node {
+          did
+        }
+      }
+    }
+  }
+`