Adapt subgraph url queries in pool tab for multinetwork (#740)

* updated pool history and pool liquidity graph queries

* fixed lint errors

* fixed graph issues

* refatch graph every 10s

* refetch liquidity info and fixed typo's

* cleared refetch intervals when unmounting pool and graph compoments on  assets detail page

src/components/organisms/AssetActions/Pool/Graph.tsx

@@ -17,8 +17,9 @@ import { darkModeConfig } from '../../../../../app.config'
 import Button from '../../../atoms/Button'
 import { Logger } from '@oceanprotocol/lib'
 import { useAsset } from '../../../../providers/Asset'
-import { gql, useQuery } from 'urql'
+import { gql, OperationContext, OperationResult } from 'urql'
 import { PoolHistory } from '../../../../@types/apollo/PoolHistory'
+import { getSubgrahUri, fetchData } from '../../../../utils/subgraph'
 
 declare type GraphType = 'liquidity' | 'price'
 
@@ -27,6 +28,8 @@ defaults.global.defaultFontFamily = `'Sharp Sans', -apple-system, BlinkMacSystem
 'Segoe UI', Helvetica, Arial, sans-serif`
 defaults.global.animation = { easing: 'easeInOutQuart', duration: 1000 }
 
+const REFETCH_INTERVAL = 10000
+
 const lineStyle: Partial<ChartDataSets> = {
   fill: false,
   lineTension: 0.1,
@@ -121,24 +124,58 @@ export default function Graph(): ReactElement {
   const [options, setOptions] = useState<ChartOptions>()
   const [graphType, setGraphType] = useState<GraphType>('liquidity')
 
-  const { price } = useAsset()
+  const { price, ddo } = useAsset()
 
   const [lastBlock, setLastBlock] = useState<number>(0)
   const [priceHistory, setPriceHistory] = useState([])
+  const [error, setError] = useState<Error>()
   const [liquidityHistory, setLiquidityHistory] = useState([])
   const [timestamps, setTimestamps] = useState([])
   const [isLoading, setIsLoading] = useState(true)
+  const [dataHistory, setDataHistory] = useState<PoolHistory>()
   const [graphData, setGraphData] = useState<ChartData>()
+  const [graphFetchInterval, setGraphFetchInterval] = useState<NodeJS.Timeout>()
 
-  const [result, refetch] = useQuery<PoolHistory>({
+  async function getPoolHistory() {
-    query: poolHistory,
+    try {
-    variables: {
+      const queryContext: OperationContext = {
-      id: price.address.toLowerCase(),
+        url: `${getSubgrahUri(
-      block: lastBlock
+          Number(ddo.chainId)
+        )}/subgraphs/name/oceanprotocol/ocean-subgraph`,
+        requestPolicy: 'network-only'
+      }
+      const queryVariables = {
+        id: price.address.toLowerCase(),
+        block: lastBlock
+      }
+
+      const queryResult: OperationResult<PoolHistory> = await fetchData(
+        poolHistory,
+        queryVariables,
+        queryContext
+      )
+      setDataHistory(queryResult?.data)
+    } catch (error) {
+      console.error('Error fetchData: ', error.message)
+      setError(error)
     }
-    // pollInterval: 20000
+  }
-  })
+
-  const { data, error } = result
+  function refetchGraph() {
+    if (!graphFetchInterval) {
+      setGraphFetchInterval(
+        setInterval(function () {
+          getPoolHistory()
+        }, REFETCH_INTERVAL)
+      )
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      clearInterval(graphFetchInterval)
+    }
+  }, [graphFetchInterval])
 
   useEffect(() => {
     Logger.log('Fired GraphOptions!')
@@ -147,59 +184,70 @@ export default function Graph(): ReactElement {
   }, [locale, darkMode.value])
 
   useEffect(() => {
-    if (!data) return
+    getPoolHistory()
-    Logger.log('Fired GraphData!')
+  }, [lastBlock])
 
-    const latestTimestamps = [
+  useEffect(() => {
-      ...timestamps,
+    async function init() {
-      ...data.poolTransactions.map((item) => {
+      const data: PoolHistory = dataHistory
-        const date = new Date(item.timestamp * 1000)
+      if (!data) {
-        return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
+        await getPoolHistory()
-      })
+        return
-    ]
+      }
-    setTimestamps(latestTimestamps)
+      Logger.log('Fired GraphData!')
 
-    const latestLiquidtyHistory = [
+      const latestTimestamps = [
-      ...liquidityHistory,
+        ...timestamps,
-      ...data.poolTransactions.map((item) => item.oceanReserve)
+        ...data.poolTransactions.map((item) => {
-    ]
+          const date = new Date(item.timestamp * 1000)
+          return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
+        })
+      ]
+      setTimestamps(latestTimestamps)
 
-    setLiquidityHistory(latestLiquidtyHistory)
+      const latestLiquidtyHistory = [
+        ...liquidityHistory,
+        ...data.poolTransactions.map((item) => item.oceanReserve)
+      ]
 
-    const latestPriceHistory = [
+      setLiquidityHistory(latestLiquidtyHistory)
-      ...priceHistory,
-      ...data.poolTransactions.map((item) => item.spotPrice)
-    ]
 
-    setPriceHistory(latestPriceHistory)
+      const latestPriceHistory = [
+        ...priceHistory,
+        ...data.poolTransactions.map((item) => item.spotPrice)
+      ]
 
-    if (data.poolTransactions.length > 0) {
+      setPriceHistory(latestPriceHistory)
-      const newBlock =
+
-        data.poolTransactions[data.poolTransactions.length - 1].block
+      if (data.poolTransactions.length > 0) {
-      if (newBlock === lastBlock) return
+        const newBlock =
-      setLastBlock(
+          data.poolTransactions[data.poolTransactions.length - 1].block
-        data.poolTransactions[data.poolTransactions.length - 1].block
+        if (newBlock === lastBlock) return
-      )
+        setLastBlock(
-      refetch()
+          data.poolTransactions[data.poolTransactions.length - 1].block
-    } else {
+        )
-      setGraphData({
+      } else {
-        labels: latestTimestamps.slice(0),
+        setGraphData({
-        datasets: [
+          labels: latestTimestamps.slice(0),
-          {
+          datasets: [
-            ...lineStyle,
+            {
-            label: 'Liquidity (OCEAN)',
+              ...lineStyle,
-            data:
+              label: 'Liquidity (OCEAN)',
-              graphType === 'liquidity'
+              data:
-                ? latestLiquidtyHistory.slice(0)
+                graphType === 'liquidity'
-                : latestPriceHistory.slice(0),
+                  ? latestLiquidtyHistory.slice(0)
-            borderColor: `#8b98a9`,
+                  : latestPriceHistory.slice(0),
-            pointBackgroundColor: `#8b98a9`
+              borderColor: `#8b98a9`,
-          }
+              pointBackgroundColor: `#8b98a9`
-        ]
+            }
-      })
+          ]
-      setIsLoading(false)
+        })
+        setIsLoading(false)
+        refetchGraph()
+      }
     }
-  }, [data, graphType])
+    init()
+  }, [dataHistory, graphType])
 
   function handleGraphTypeSwitch(e: ChangeEvent<HTMLButtonElement>) {
     e.preventDefault()

src/components/organisms/AssetActions/Pool/index.tsx

@@ -15,10 +15,13 @@ import { PoolBalance } from '../../../../@types/TokenBalance'
 import Transactions from './Transactions'
 import Graph from './Graph'
 import { useAsset } from '../../../../providers/Asset'
-import { gql, useQuery } from 'urql'
+import { gql, OperationResult, OperationContext } from 'urql'
 import { PoolLiquidity } from '../../../../@types/apollo/PoolLiquidity'
 import { useOcean } from '../../../../providers/Ocean'
 import { useWeb3 } from '../../../../providers/Web3'
+import { getSubgrahUri, fetchData } from '../../../../utils/subgraph'
+
+const REFETCH_INTERVAL = 5000
 
 const contentQuery = graphql`
   query PoolQuery {
@@ -89,23 +92,55 @@ export default function Pool(): ReactElement {
   const [creatorLiquidity, setCreatorLiquidity] = useState<PoolBalance>()
   const [creatorPoolTokens, setCreatorPoolTokens] = useState<string>()
   const [creatorPoolShare, setCreatorPoolShare] = useState<string>()
+  const [dataLiquidity, setdataLiquidity] = useState<PoolLiquidity>()
+  const [liquidityFetchInterval, setLiquidityFetchInterval] =
+    useState<NodeJS.Timeout>()
 
   // the purpose of the value is just to trigger the effect
   const [refreshPool, setRefreshPool] = useState(false)
-  const [result] = useQuery<PoolLiquidity>({
+
-    query: poolLiquidityQuery,
+  async function getPoolLiquidity() {
-    variables: {
+    const queryContext: OperationContext = {
+      url: `${getSubgrahUri(
+        Number(ddo.chainId)
+      )}/subgraphs/name/oceanprotocol/ocean-subgraph`,
+      requestPolicy: 'network-only'
+    }
+    const queryVariables = {
       id: price.address.toLowerCase(),
       shareId: `${price.address.toLowerCase()}-${ddo.publicKey[0].owner.toLowerCase()}`
     }
-    // pollInterval: 5000
-  })
 
-  const { data: dataLiquidity } = result
+    const queryResult: OperationResult<PoolLiquidity> = await fetchData(
+      poolLiquidityQuery,
+      queryVariables,
+      queryContext
+    )
+    setdataLiquidity(queryResult?.data)
+  }
+
+  function refetchLiquidity() {
+    if (!liquidityFetchInterval) {
+      setLiquidityFetchInterval(
+        setInterval(function () {
+          getPoolLiquidity()
+        }, REFETCH_INTERVAL)
+      )
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      clearInterval(liquidityFetchInterval)
+    }
+  }, [liquidityFetchInterval])
 
   useEffect(() => {
     async function init() {
-      if (!dataLiquidity || !dataLiquidity.pool) return
+      if (!dataLiquidity || !dataLiquidity.pool) {
+        await getPoolLiquidity()
+        return
+      }
 
       // Total pool shares
       const totalPoolTokens = dataLiquidity.pool.totalShares
@@ -153,6 +188,7 @@ export default function Pool(): ReactElement {
         creatorLiquidity &&
         ((Number(creatorPoolTokens) / Number(totalPoolTokens)) * 100).toFixed(2)
       setCreatorPoolShare(creatorPoolShare)
+      refetchLiquidity()
     }
     init()
   }, [dataLiquidity, ddo.dataToken, price.datatoken, price.ocean, price?.value])

src/utils/subgraph.ts

@@ -141,12 +141,12 @@ const HighestLiquidityAssets = gql`
   }
 `
 
-function getSubgrahUri(chainId: number): string {
+export function getSubgrahUri(chainId: number): string {
   const config = getOceanConfig(chainId)
   return config.subgraphUri
 }
 
-async function fetchData(
+export async function fetchData(
   query: TypedDocumentNode,
   variables: any,
   context: OperationContext
@@ -157,6 +157,7 @@ async function fetchData(
     return response
   } catch (error) {
     console.error('Error fetchData: ', error.message)
+    throw Error(error.message)
   }
 }