spread appConfig into siteMetadata for use in GraphQL

gatsby-config.js

@@ -1,10 +1,14 @@
 require('dotenv').config()
 
 const siteContent = require('./content/site.json')
+const appConfig = require('./app.config')
 
 module.exports = {
   siteMetadata: {
-    ...siteContent.site
+    ...siteContent.site,
+    appConfig: {
+      ...appConfig
+    }
   },
   plugins: [
     {

src/components/organisms/AssetList.tsx

@@ -6,13 +6,14 @@ import { updateQueryStringParameter } from '../../utils'
 import styles from './AssetList.module.css'
 import { MetaDataMarket } from '../../@types/MetaData'
 import { DDO } from '@oceanprotocol/lib'
-import { oceanConfig } from '../../../app.config'
+import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 
 declare type AssetListProps = {
   queryResult: QueryResult
 }
 
 const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
+  const { appConfig } = useSiteMetadata()
   // TODO: restore Pagination behavior
 
   // Construct the urls on the pagination links. This is only for UX,
@@ -52,7 +53,7 @@ const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
           })
         ) : (
           <div className={styles.empty}>
-            No data sets found in {oceanConfig.metadataStoreUri}
+            No data sets found in {appConfig.oceanConfig.metadataStoreUri}
           </div>
         )}
       </div>

src/components/pages/Home.tsx

@@ -1,19 +1,16 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import SearchBar from '../molecules/SearchBar'
 import styles from './Home.module.css'
-import { oceanConfig } from '../../../app.config'
 import { MetadataStore, Logger } from '@oceanprotocol/lib'
 import AssetList from '../organisms/AssetList'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatastore/MetadataStore'
 import Container from '../atoms/Container'
 import Loader from '../atoms/Loader'
+import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 
-async function getLatestAssets() {
+async function getLatestAssets(metadataStoreUri: string) {
   try {
-    const metadataStore = new MetadataStore(
+    const metadataStore = new MetadataStore(metadataStoreUri, Logger)
-      oceanConfig.metadataStoreUri,
-      Logger
-    )
 
     const result = await metadataStore.queryMetadata({
       page: 1,
@@ -29,12 +26,15 @@ async function getLatestAssets() {
 }
 
 export default function HomePage(): ReactElement {
+  const { appConfig } = useSiteMetadata()
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     async function init() {
-      const results = await getLatestAssets()
+      const results = await getLatestAssets(
+        appConfig.oceanConfig.metadataStoreUri
+      )
       setQueryResult(results)
       setLoading(false)
     }

src/hooks/useSiteMetadata.ts

@@ -2,15 +2,36 @@ import { useStaticQuery, graphql } from 'gatsby'
 
 const query = graphql`
   query {
-    siteMetadata: allFile(filter: { relativePath: { eq: "site.json" } }) {
+    site {
+      siteMetadata {
+        siteTitle
+        siteTagline
+        siteUrl
+        siteIcon
+        copyright
+        menu {
+          name
+          link
+        }
+        appConfig {
+          infuraProjectId
+          networks
+          oceanConfig {
+            factoryAddress
+            metadataStoreUri
+            nodeUri
+            providerUri
+            verbose
+          }
+        }
+      }
+    }
+
+    siteImage: allFile(filter: { relativePath: { eq: "site.json" } }) {
       edges {
         node {
           childContentJson {
             site {
-              siteTitle
-              siteTagline
-              siteUrl
-              siteIcon
               siteImage {
                 childImageSharp {
                   original {
@@ -18,11 +39,6 @@ const query = graphql`
                   }
                 }
               }
-              copyright
-              menu {
-                name
-                link
-              }
             }
           }
         }
@@ -33,5 +49,11 @@ const query = graphql`
 
 export function useSiteMetadata() {
   const data = useStaticQuery(query)
-  return data.siteMetadata.edges[0].node.childContentJson.site
+
+  const siteMeta = {
+    ...data.siteImage.edges[0].node.childContentJson.site,
+    ...data.site.siteMetadata
+  }
+
+  return siteMeta
 }

src/pages/asset/index.tsx

@@ -5,11 +5,12 @@ import Layout from '../../components/Layout'
 import { PageProps } from 'gatsby'
 import { MetaDataMarket, ServiceMetaDataMarket } from '../../@types/MetaData'
 import { MetadataStore, Logger } from '@oceanprotocol/lib'
-import { oceanConfig } from '../../../app.config'
 import Alert from '../../components/atoms/Alert'
 import Loader from '../../components/atoms/Loader'
+import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 
 export default function AssetRoute(props: PageProps): ReactElement {
+  const { appConfig } = useSiteMetadata()
   const [metadata, setMetadata] = useState<MetaDataMarket>()
   const [title, setTitle] = useState<string>()
   const [error, setError] = useState<string>()
@@ -20,7 +21,7 @@ export default function AssetRoute(props: PageProps): ReactElement {
     async function init() {
       try {
         const metadataStore = new MetadataStore(
-          oceanConfig.metadataStoreUri,
+          appConfig.oceanConfig.metadataStoreUri,
           Logger
         )
         const ddo = await metadataStore.retrieveDDO(did)