remove apollo typings and generate schema using urql

README.md

@@ -173,10 +173,10 @@ function Component() {
 
 Most financial data in the market is retrieved with GraphQL from [our own subgraph](https://github.com/oceanprotocol/ocean-subgraph), rendered on top of the initial data coming from Aquarius.
 
-The app has [Apollo Client](https://www.apollographql.com/docs/react/) setup to query the respective subgraph based on network. In any component this client can be used like so:
+The app has [Urql Client](https://formidable.com/open-source/urql/docs/basics/react-preact/) setup to query the respective subgraph based on network. In any component this client can be used like so:
 
 ```tsx
-import { gql, useQuery } from '@apollo/client'
+import { gql, useQuery } from 'urql'
 
 const query = gql`
   query PoolLiquidity($id: ID!, $shareId: ID) {

apollo.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  client: {
-    service: {
-      name: 'ocean',
-      url: 'https://subgraph.rinkeby.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph',
-      // optional disable SSL validation check
-      skipSSLValidation: true
-    }
-  }
-}

gatsby-node.js

@@ -7,8 +7,8 @@ execSync(`node ./scripts/write-repo-metadata > repo-metadata.json`, {
   stdio: 'inherit'
 })
 
-// Generate Apollo typings
+// Generate GraphQl typings for urql
-execSync(`npm run apollo:codegen`, { stdio: 'inherit' })
+execSync(`npm run graphql:generateSchema`, { stdio: 'inherit' })
 
 // Fetch EVM networks metadata
 execSync(

package.json

@@ -9,7 +9,7 @@
     "build": "gatsby build && cp _redirects public/_redirects",
     "serve": "serve -s public/",
     "jest": "NODE_ENV=test jest -c tests/unit/jest.config.js",
-    "test": "npm run apollo:codegen && npm run lint && npm run jest",
+    "test": "npm run graphql:generateSchema && npm run lint && npm run jest",
     "test:watch": "npm run lint && npm run jest -- --watch",
     "lint": "npm run write:repoMetadata && eslint --ignore-path .gitignore --ext .js --ext .ts --ext .tsx . && npm run type-check",
     "format": "prettier --ignore-path .gitignore './**/*.{css,yml,js,ts,tsx,json}' --write",
@@ -19,11 +19,10 @@
     "storybook:build": "build-storybook -c .storybook -o public/storybook",
     "write:repoMetadata": "node ./scripts/write-repo-metadata > repo-metadata.json",
     "deploy:s3": "./scripts/deploy-s3.sh",
-    "apollo:codegen": "apollo client:codegen --target typescript --tsFileExtension=d.ts --outputFlat src/@types/apollo/",
+    "graphql:generateSchema": "node ./scripts/generate-graphql-schema",
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@apollo/client": "^3.3.19",
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "^5.15.0",
     "@oceanprotocol/art": "^3.0.0",
@@ -32,6 +31,7 @@
     "@portis/web3": "^4.0.4",
     "@sindresorhus/slugify": "^2.1.0",
     "@tippyjs/react": "^4.2.5",
+    "@urql/introspection": "^0.3.0",
     "@walletconnect/web3-provider": "^1.4.1",
     "axios": "^0.21.1",
     "chart.js": "^2.9.4",
@@ -60,6 +60,7 @@
     "gatsby-transformer-remark": "^2.16.1",
     "gatsby-transformer-sharp": "^2.12.1",
     "graphql": "14.7.0",
+    "graphql-schema-typescript": "^1.5.2",
     "is-url-superb": "^6.0.0",
     "jwt-decode": "^3.1.2",
     "lodash.debounce": "^4.0.8",
@@ -108,7 +109,6 @@
     "@types/yup": "^0.29.11",
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",
-    "apollo": "^2.33.4",
     "eslint": "^7.27.0",
     "eslint-config-oceanprotocol": "^1.5.0",
     "eslint-config-prettier": "^8.3.0",

scripts/generate-graphql-schema.js

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+'use strict'
+
+const fs = require('fs')
+const axios = require('axios')
+const { getIntrospectionQuery } = require('graphql/utilities')
+const { generateTypeScriptTypes } = require('graphql-schema-typescript')
+
+generateGraphSchema()
+
+async function generateGraphSchema() {
+  const query = JSON.stringify({
+    query: getIntrospectionQuery({ descriptions: false })
+  })
+  const response = await axios.post(
+    'https://subgraph.rinkeby.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph',
+    query
+  )
+  generateTypeScriptTypes(response.data.data, './src/@types/schema.json')
+  // fs.writeFileSync('./src/@types/schema.json', JSON.stringify(response.data))
+}

src/components/molecules/PoolTransactions.tsx

@@ -9,10 +9,6 @@ import { useUserPreferences } from '../../providers/UserPreferences'
 import { Ocean } from '@oceanprotocol/lib'
 import { formatPrice } from '../atoms/Price/PriceUnit'
 import { gql, useQuery } from 'urql'
-import {
-  TransactionHistory,
-  TransactionHistory_poolTransactions as TransactionHistoryPoolTransactions
-} from '../../@types/apollo/TransactionHistory'
 
 import web3 from 'web3'
 import { useWeb3 } from '../../providers/Web3'

src/components/organisms/AssetActions/Consume.tsx

@@ -6,7 +6,6 @@ import Price from '../../atoms/Price'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import { useAsset } from '../../../providers/Asset'
 import { gql, useQuery } from 'urql'
-import { OrdersData } from '../../../@types/apollo/OrdersData'
 import BigNumber from 'bignumber.js'
 import { useOcean } from '../../../providers/Ocean'
 import { useWeb3 } from '../../../providers/Web3'

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

@@ -18,7 +18,6 @@ import Button from '../../../atoms/Button'
 import { Logger } from '@oceanprotocol/lib'
 import { useAsset } from '../../../../providers/Asset'
 import { gql, useQuery } from 'urql'
-import { PoolHistory } from '../../../../@types/apollo/PoolHistory'
 
 declare type GraphType = 'liquidity' | 'price'
 

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

@@ -16,7 +16,6 @@ import Transactions from './Transactions'
 import Graph from './Graph'
 import { useAsset } from '../../../../providers/Asset'
 import { gql, useQuery } from 'urql'
-import { PoolLiquidity } from '../../../../@types/apollo/PoolLiquidity'
 import { useOcean } from '../../../../providers/Ocean'
 import { useWeb3 } from '../../../../providers/Web3'
 

src/components/organisms/AssetContent/EditHistory.tsx

@@ -4,7 +4,6 @@ import ExplorerLink from '../../atoms/ExplorerLink'
 import Time from '../../atoms/Time'
 import styles from './EditHistory.module.css'
 import { gql, useQuery } from 'urql'
-import { ReceiptData_datatokens_updates as ReceiptData } from '../../../@types/apollo/ReceiptData'
 import { useWeb3 } from '../../../providers/Web3'
 
 const getReceipts = gql`

src/components/pages/History/ComputeJobs/index.tsx

@@ -12,7 +12,6 @@ import { gql, useQuery } from 'urql'
 import { useWeb3 } from '../../../../providers/Web3'
 import { queryMetadata } from '../../../../utils/aquarius'
 import axios, { CancelToken } from 'axios'
-import { ComputeOrders } from '../../../../@types/apollo/ComputeOrders'
 import Details from './Details'
 import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute'
 import { ReactComponent as Refresh } from '../../../../images/refresh.svg'

src/components/pages/History/PoolShares.tsx

@@ -4,11 +4,6 @@ import Conversion from '../../atoms/Price/Conversion'
 import styles from './PoolShares.module.css'
 import AssetTitle from '../../molecules/AssetListTitle'
 import { gql, useQuery } from 'urql'
-import {
-  PoolShares as PoolSharesList,
-  PoolShares_poolShares as PoolShare,
-  PoolShares_poolShares_poolId_tokens as PoolSharePoolIdTokens
-} from '../../../@types/apollo/PoolShares'
 import web3 from 'web3'
 import Token from '../../organisms/AssetActions/Pool/Token'
 import { useWeb3 } from '../../../providers/Web3'

src/providers/ApolloClientProvider.tsx

@@ -1,63 +0,0 @@
-import {
-  ApolloClient,
-  ApolloProvider,
-  HttpLink,
-  InMemoryCache,
-  NormalizedCacheObject
-} from '@apollo/client'
-import { Logger } from '@oceanprotocol/lib'
-import fetch from 'cross-fetch'
-import React, { useState, useEffect, ReactNode, ReactElement } from 'react'
-import { useWeb3 } from './Web3'
-import { getOceanConfig } from '../utils/ocean'
-
-let apolloClient: ApolloClient<NormalizedCacheObject>
-
-function createClient(subgraphUri: string) {
-  const client = new ApolloClient({
-    link: new HttpLink({
-      uri: `${subgraphUri}/subgraphs/name/oceanprotocol/ocean-subgraph`,
-      fetch
-    }),
-    cache: new InMemoryCache()
-  })
-
-  return client
-}
-
-export function getApolloClientInstance(): ApolloClient<NormalizedCacheObject> {
-  return apolloClient
-}
-
-export default function ApolloClientProvider({
-  children
-}: {
-  children: ReactNode
-}): ReactElement {
-  const { networkId } = useWeb3()
-  const [client, setClient] = useState<ApolloClient<NormalizedCacheObject>>()
-
-  useEffect(() => {
-    const oceanConfig = getOceanConfig(networkId || 1)
-
-    if (!oceanConfig?.subgraphUri) {
-      Logger.error(
-        'No subgraphUri defined, preventing ApolloProvider from initialization.'
-      )
-      return
-    }
-
-    const newClient = createClient(oceanConfig.subgraphUri)
-    apolloClient = newClient
-    setClient(newClient)
-    Logger.log(`[apollo] Client connected to ${oceanConfig.subgraphUri}`)
-  }, [networkId])
-
-  return client ? (
-    <ApolloProvider client={client}>{children}</ApolloProvider>
-  ) : (
-    <></>
-  )
-}
-
-export { ApolloClientProvider }

src/providers/UrqlProvider.tsx

@@ -1,7 +1,9 @@
 import { createClient, Provider, Client } from 'urql'
-import { Logger } from '@oceanprotocol/lib'
+import { getIntrospectionQuery } from 'graphql'
+import axios from 'axios'
 import React, { useState, useEffect, ReactNode, ReactElement } from 'react'
 import { useWeb3 } from './Web3'
+import { Logger } from '@oceanprotocol/lib'
 import { getOceanConfig } from '../utils/ocean'
 
 let urqlClient: Client
@@ -10,6 +12,7 @@ function createUrqlClient(subgraphUri: string) {
   const client = createClient({
     url: `${subgraphUri}/subgraphs/name/oceanprotocol/ocean-subgraph`
   })
+  generateGraphSchema(subgraphUri)
   return client
 }
 
@@ -17,6 +20,16 @@ export function getUrqlClientInstance(): Client {
   return urqlClient
 }
 
+async function generateGraphSchema(subgraphUri: string) {
+  const query = JSON.stringify({
+    query: getIntrospectionQuery({ descriptions: false })
+  })
+  const response = await axios.post(
+    `${subgraphUri}/subgraphs/name/oceanprotocol/ocean-subgraph`,
+    query
+  )
+}
+
 export default function UrqlClientProvider({
   children
 }: {
@@ -38,7 +51,7 @@ export default function UrqlClientProvider({
     const newClient = createUrqlClient(oceanConfig.subgraphUri)
     urqlClient = newClient
     setClient(newClient)
-    Logger.log(`[apollo] Client connected to ${oceanConfig.subgraphUri}`)
+    Logger.log(`[URQL] Client connected to ${oceanConfig.subgraphUri}`)
   }, [networkId])
 
   return client ? <Provider value={client}>{children}</Provider> : <></>

src/utils/subgraph.ts

@@ -1,17 +1,9 @@
 import { gql, OperationResult, TypedDocumentNode, OperationContext } from 'urql'
 import { DDO, BestPrice } from '@oceanprotocol/lib'
 import { getUrqlClientInstance } from '../providers/UrqlProvider'
-import {
-  AssetsPoolPrice,
-  AssetsPoolPrice_pools as AssetsPoolPricePools
-} from '../@types/apollo/AssetsPoolPrice'
-import {
-  AssetsFrePrice,
-  AssetsFrePrice_fixedRateExchanges as AssetsFrePriceFixedRateExchanges
-} from '../@types/apollo/AssetsFrePrice'
-import { AssetPreviousOrder } from '../@types/apollo/AssetPreviousOrder'
 import { getOceanConfig } from './ocean'
 import web3 from 'web3'
+import schema from '../../src/@types/schema.json'
 
 export interface PriceList {
   [key: string]: string
@@ -227,7 +219,7 @@ async function getAssetsPoolsExchangesAndDatatokenMap(
       datatokenAddress_in: chainAssetLists[chainKey]
     }
 
-    //  harcoded until we have chainId on assets
+    //    harcoded until we have chainId on assets
     const queryContext: OperationContext = {
       url: `${getSubgrahUri(1)}/subgraphs/name/oceanprotocol/ocean-subgraph`,
       requestPolicy: 'network-only'