From 129fff49255fda6d6035257d43846a1d38a0d331 Mon Sep 17 00:00:00 2001
From: Hornebom <you@hornebom.com>
Date: Mon, 3 Jul 2023 15:59:50 +0200
Subject: [PATCH] Fix broken development environment (#1483)

* Fix broken development environment

- Unexpected token error thrown in graphql-request caused by vite

Context and fix:
Vite Environment Variable Replacements #13594
https://github.com/vitejs/vite/discussions/13594#discussioncomment-6250699

* calls graphql endpoint with native fetch

- removes graphql+ graphql-request and calls endpoint with fetch instead

* throw error if response not ok -> let react query retry

* removes try catch
---
 centrifuge-app/package.json                   |  2 -
 .../src/utils/tinlake/useTinlakePools.ts      | 69 ++++++++++++-------
 yarn.lock                                     | 30 --------
 3 files changed, 44 insertions(+), 57 deletions(-)

diff --git a/centrifuge-app/package.json b/centrifuge-app/package.json
index a48e975ff5..5db8bfd417 100644
--- a/centrifuge-app/package.json
+++ b/centrifuge-app/package.json
@@ -43,8 +43,6 @@
     "bn.js": "^5.2.1",
     "form-data": "^4.0.0",
     "formik": "^2.2.9",
-    "graphql": "^16.6.0",
-    "graphql-request": "^6.0.0",
     "jw3t": "^1.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/centrifuge-app/src/utils/tinlake/useTinlakePools.ts b/centrifuge-app/src/utils/tinlake/useTinlakePools.ts
index e320a124bd..6cb5f0f0af 100644
--- a/centrifuge-app/src/utils/tinlake/useTinlakePools.ts
+++ b/centrifuge-app/src/utils/tinlake/useTinlakePools.ts
@@ -11,7 +11,6 @@ import {
 import { useCentrifuge } from '@centrifuge/centrifuge-react'
 import { BigNumber } from '@ethersproject/bignumber'
 import BN from 'bn.js'
-import { request } from 'graphql-request'
 import * as React from 'react'
 import { useQuery } from 'react-query'
 import { lastValueFrom } from 'rxjs'
@@ -237,34 +236,54 @@ function getTinlakeLoanStatus(loan: TinlakeLoanData) {
 
 // TODO: refactor to use multicall instead of subgraph
 async function getTinlakeLoans(poolId: string) {
-  const query = `
-    {
-      pools (where: { id_in: ["${poolId.toLowerCase()}"]}) {
-        loans (first: 1000) {
-          nftId
-          id
-          index
-          financingDate
-          debt
-          pool {
-            id
+  let pools: {
+    loans: unknown[]
+  }[] = []
+
+  const response = await fetch('https://graph.centrifuge.io/tinlake', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      query: `
+        query GetLoansByPoolId($poolId: String!) {
+          pools (where: { id_in: [$poolId]}) {
+            loans (first: 1000) {
+              nftId
+              id
+              index
+              financingDate
+              debt
+              pool {
+                id
+              }
+              maturityDate
+              interestRatePerSecond
+              borrowsAggregatedAmount
+              repaysAggregatedAmount
+              ceiling
+              closed
+              riskGroup
+              owner
+            }
           }
-          maturityDate
-          interestRatePerSecond
-          borrowsAggregatedAmount
-          repaysAggregatedAmount
-          ceiling
-          closed
-          riskGroup
-          owner
         }
-      }
-    }`
+      `,
+      variables: {
+        poolId: poolId.toLowerCase(),
+      },
+    }),
+  })
 
-  const data = await request<{ data: any[] }>('https://graph.centrifuge.io/tinlake', query)
+  if (response?.ok) {
+    const { data } = await response.json()
+    pools = data.pools
+  } else {
+    throw new Error(`Issue fetching loans for Tinlake pool ${poolId}. Status: ${response?.status}`)
+  }
 
-  // @ts-expect-error
-  const loans = data.pools.reduce((assets: any[], pool: any) => {
+  const loans = pools.reduce((assets: any[], pool: any) => {
     if (pool.loans) {
       assets.push(...pool.loans)
     }
diff --git a/yarn.lock b/yarn.lock
index c41bbfa920..c67124b6f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1843,8 +1843,6 @@ __metadata:
     eslint-plugin-react: 7.30.1
     form-data: ^4.0.0
     formik: ^2.2.9
-    graphql: ^16.6.0
-    graphql-request: ^6.0.0
     jw3t: ^1.0.10
     nodemon: ^2.0.20
     npm-run-all: ^4.1.5
@@ -3130,15 +3128,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graphql-typed-document-node/core@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "@graphql-typed-document-node/core@npm:3.2.0"
-  peerDependencies:
-    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
-  checksum: b08775cae1c65d89c54df4be0356786169ed3420a1f872c4319eb581b07282d6efec1ac548205ac73d576d5604f0a02c243b27d0ab6b1634ce7c4fddf90a5474
-  languageName: node
-  linkType: hard
-
 "@grpc/grpc-js@npm:~1.8.0":
   version: 1.8.17
   resolution: "@grpc/grpc-js@npm:1.8.17"
@@ -17419,25 +17408,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"graphql-request@npm:^6.0.0":
-  version: 6.1.0
-  resolution: "graphql-request@npm:6.1.0"
-  dependencies:
-    "@graphql-typed-document-node/core": ^3.2.0
-    cross-fetch: ^3.1.5
-  peerDependencies:
-    graphql: 14 - 16
-  checksum: f7554a812ed372f7df78311277ad15dd8571bd1796317ee593b53bbed16983f5ca512d5c2a48746c3337b1ab075c2c9baa78c2edd3331d6070b950d00a359e14
-  languageName: node
-  linkType: hard
-
-"graphql@npm:^16.6.0":
-  version: 16.7.1
-  resolution: "graphql@npm:16.7.1"
-  checksum: 0a43da06571f168e4c1950b9817bbe0494eaa56f14151e671547e4735e501f5dad3e826a92e2df3ae9b143f353c8a86ad5906309f95230c7fbb7d5cac707a06f
-  languageName: node
-  linkType: hard
-
 "gtoken@npm:^6.1.0":
   version: 6.1.2
   resolution: "gtoken@npm:6.1.2"