new tactic: pull in assets into GraphQL on build time

gatsby-config.js

@@ -28,6 +28,7 @@ module.exports = {
         path: `${__dirname}/node_modules/@oceanprotocol/art/`
       }
     },
+    'gatsby-source-ocean',
     {
       resolve: 'gatsby-plugin-sharp',
       options: {

gatsby-node.js

@@ -1,5 +1,4 @@
 const path = require('path')
-const axios = require('axios')
 // const { config } = require('./src/config/ocean')
 
 exports.onCreateWebpackConfig = ({ actions }) => {
@@ -11,47 +10,70 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   })
 }
 
-exports.createPages = async ({ actions, reporter }) => {
+exports.createPages = async ({ graphql, actions }) => {
   const { createPage } = actions
-  // Query for all assets to use in creating pages.
-  const result = await axios(
-    `https://aquarius.marketplace.oceanprotocol.com/api/v1/aquarius/assets`
-  )
-  const assets = result.data.ids
 
-  // Handle errors
+  // Create pages for all assets
+  const assetDetailsTemplate = path.resolve(
+    'src/components/templates/AssetDetails/index.tsx'
+  )
+
+  const result = await graphql(`
+    query {
+      allAsset {
+        edges {
+          node {
+            did
+            main {
+              type
+              name
+              dateCreated
+              author
+              license
+              price
+              datePublished
+              files {
+                contentType
+                index
+              }
+            }
+            additionalInformation {
+              description
+              deliveryType
+              termsAndConditions
+              access
+            }
+          }
+        }
+      }
+    }
+  `)
+
   if (result.errors) {
-    reporter.panicOnBuild(`Error while querying Aquarius for all assets.`)
-    return
+    throw result.errors
   }
 
-  // Create pages for each DID
-  const assetDetailsTemplate = path.resolve(
-    `src/components/templates/AssetDetails/index.tsx`
-  )
+  await result.data.allAsset.edges.forEach(({ node }) => {
+    const path = `/asset/${node.did}`
 
-  await assets.forEach(async (did) => {
-    const path = `/asset/${did}`
-
-    await createPage({
+    createPage({
       path,
       component: assetDetailsTemplate,
-      context: { did }
+      context: { did: node.did }
     })
   })
 }
 
-exports.onCreatePage = async ({ page, actions }) => {
-  const { createPage } = actions
+// exports.onCreatePage = async ({ page, actions }) => {
+//   const { createPage } = actions
+//   // page.matchPath is a special key that's used for matching pages
+//   // only on the client.
+//   const handleClientSideOnly = page.path.match(/^\/asset/)
 
-  // page.matchPath is a special key that's used for matching pages
-  // only on the client.
-  const handleClientSideOnly = page.path.match(/^\/asset/)
+//   if (handleClientSideOnly) {
+//     page.matchPath = '/asset/*'
 
-  if (handleClientSideOnly) {
-    page.matchPath = '/asset/*'
-
-    // Update the page.
-    createPage(page)
-  }
-}
+//     // Update the page.
+//     createPage(page)
+//   }
+// }

plugins/gatsby-source-ocean/gatsby-node.js

@@ -0,0 +1,46 @@
+const axios = require('axios')
+
+exports.sourceNodes = async ({
+  actions,
+  createNodeId,
+  createContentDigest
+}) => {
+  const { createNode } = actions
+
+  // Query for all assets to use in creating pages.
+  const result = await axios(
+    `https://aquarius.marketplace.oceanprotocol.com/api/v1/aquarius/assets`
+  )
+
+  for (let i = 0; i < result.data.ids.length; i++) {
+    const did = result.data.ids[i]
+
+    const metadataResult = await axios(
+      `https://aquarius.marketplace.oceanprotocol.com/api/v1/aquarius/assets/metadata/${did}`
+    )
+
+    const metadata = {
+      did,
+      ...metadataResult.data.attributes
+    }
+
+    const nodeMeta = {
+      id: createNodeId(did),
+      parent: null,
+      children: [],
+      internal: {
+        type: 'Asset',
+        mediaType: 'application/json',
+        content: JSON.stringify(metadata),
+        contentDigest: createContentDigest(metadata)
+      }
+    }
+
+    const node = {
+      ...metadata,
+      ...nodeMeta
+    }
+
+    await createNode(node)
+  }
+}

plugins/gatsby-source-ocean/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "gatsby-source-ocean"
+}

src/components/templates/AssetDetails/index.tsx

@@ -1,53 +1,41 @@
-import React, { useState, ReactElement, useEffect } from 'react'
-import { Aquarius, Logger } from '@oceanprotocol/squid'
-import { PageProps } from 'gatsby'
-import { config } from '../../../config/ocean'
+import React, { ReactElement } from 'react'
+import { PageProps, graphql } from 'gatsby'
 import Layout from '../../../components/Layout'
-import { MetaDataMarket, ServiceMetaDataMarket } from '../../../@types/MetaData'
-import { Alert } from '../../atoms/Alert'
 import AssetContent from './AssetContent'
 
 export default function AssetDetailsTemplate(props: PageProps): ReactElement {
-  const [metadata, setMetadata] = useState<MetaDataMarket>()
-  const [title, setTitle] = useState<string>()
-  const [error, setError] = useState<string>()
+  const { asset } = props.data as any
 
-  const { did } = props.pageContext as { did: string }
-
-  useEffect(() => {
-    async function init() {
-      try {
-        const aquarius = new Aquarius(config.aquariusUri, Logger)
-        const ddo = await aquarius.retrieveDDO(did)
-
-        if (!ddo) {
-          setTitle('Could not retrieve asset')
-          setError('The DDO was not found in Aquarius.')
-          return
-        }
-
-        const { attributes }: ServiceMetaDataMarket = ddo.findServiceByType(
-          'metadata'
+  return (
+    <Layout title={asset.main.name} uri={props.path}>
+      <AssetContent did={asset.did} metadata={asset} />
+    </Layout>
   )
-
-        setTitle(attributes.main.name)
-        console.log(attributes)
-        setMetadata(attributes)
-      } catch (error) {
-        setTitle('Error retrieving asset')
-        setError(error.message)
-      }
-    }
-    init()
-  }, [])
-
-  return error ? (
-    <Layout title={title} noPageHeader uri={props.path}>
-      <Alert title={title} text={error} state="error" />
-    </Layout>
-  ) : did && metadata ? (
-    <Layout title={title} uri={props.path}>
-      <AssetContent did={did} metadata={metadata} />
-    </Layout>
-  ) : null
 }
+
+export const templateQuery = graphql`
+  query AssetByDid($did: String!) {
+    asset(did: { eq: $did }) {
+      did
+      main {
+        type
+        name
+        dateCreated
+        author
+        license
+        price
+        datePublished
+        files {
+          index
+          contentType
+        }
+      }
+      additionalInformation {
+        description
+        deliveryType
+        termsAndConditions
+        access
+      }
+    }
+  }
+`

src/pages/asset/index.tsx

@@ -13,7 +13,7 @@ export default function AssetRoute(props: PageProps): ReactElement {
   const [title, setTitle] = useState<string>()
   const [error, setError] = useState<string>()
 
-  const { did } = props.pageContext as { did: string }
+  const did = props.location.pathname.split('/')[2]
 
   useEffect(() => {
     async function init() {
@@ -32,7 +32,6 @@ export default function AssetRoute(props: PageProps): ReactElement {
         )
 
         setTitle(attributes.main.name)
-        console.log(attributes)
         setMetadata(attributes)
       } catch (error) {
         setTitle('Error retrieving asset')
@@ -43,14 +42,18 @@ export default function AssetRoute(props: PageProps): ReactElement {
   }, [])
 
   return error ? (
-    <Layout title={title} noPageHeader uri={props.path}>
+    <Layout title={title} noPageHeader uri={props.location.pathname}>
       <Alert title={title} text={error} state="error" />
     </Layout>
   ) : did && metadata ? (
-    <Layout title={title} uri={props.path}>
+    <Layout title={title} uri={props.location.pathname}>
       <Router basepath="/asset">
         <AssetContent did={did} metadata={metadata} path="/asset/:did" />
       </Router>
     </Layout>
-  ) : null
+  ) : (
+    <Layout title="Loading..." uri={props.location.pathname}>
+      Loading...
+    </Layout>
+  )
 }