From 63c1af97601aa2a268e775790e961bc4e0e04100 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Mon, 28 Feb 2022 15:43:36 -0800
Subject: [PATCH] add apollo setup for trading app

---
 apps/trading/__generated__/globalTypes.ts     | 12 +++++
 apps/trading/apollo.config.js                 |  9 ++++
 apps/trading/lib/apollo-client.ts             | 53 +++++++++++++++++++
 apps/trading/pages/_app.tsx                   |  8 ++-
 .../pages/markets/__generated__/Markets.ts    | 23 ++++++++
 apps/trading/pages/markets/index.tsx          | 32 ++++++++++-
 apps/trading/project.json                     | 10 ++++
 7 files changed, 144 insertions(+), 3 deletions(-)
 create mode 100644 apps/trading/__generated__/globalTypes.ts
 create mode 100644 apps/trading/apollo.config.js
 create mode 100644 apps/trading/lib/apollo-client.ts
 create mode 100644 apps/trading/pages/markets/__generated__/Markets.ts

diff --git a/apps/trading/__generated__/globalTypes.ts b/apps/trading/__generated__/globalTypes.ts
new file mode 100644
index 000000000..8d9b7dd7a
--- /dev/null
+++ b/apps/trading/__generated__/globalTypes.ts
@@ -0,0 +1,12 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+//==============================================================
+// START Enums and Input Objects
+//==============================================================
+
+//==============================================================
+// END Enums and Input Objects
+//==============================================================
diff --git a/apps/trading/apollo.config.js b/apps/trading/apollo.config.js
new file mode 100644
index 000000000..b71577567
--- /dev/null
+++ b/apps/trading/apollo.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  client: {
+    service: {
+      name: 'vega',
+      url: process.env.NX_VEGA_URL,
+    },
+    includes: ['{components,lib,pages}/**/*.{ts,tsx,js,jsx,graphql}'],
+  },
+};
diff --git a/apps/trading/lib/apollo-client.ts b/apps/trading/lib/apollo-client.ts
new file mode 100644
index 000000000..2b2ed69bd
--- /dev/null
+++ b/apps/trading/lib/apollo-client.ts
@@ -0,0 +1,53 @@
+import { ApolloClient, from, HttpLink, InMemoryCache } from '@apollo/client';
+import { onError } from '@apollo/client/link/error';
+import { RetryLink } from '@apollo/client/link/retry';
+
+export function createClient(base?: string) {
+  if (!base) {
+    throw new Error('Base must be passed into createClient!');
+  }
+  const gqlPath = 'query';
+  const urlHTTP = new URL(gqlPath, base);
+  const urlWS = new URL(gqlPath, base);
+  // Replace http with ws, preserving if its a secure connection eg. https => wss
+  urlWS.protocol = urlWS.protocol.replace('http', 'ws');
+
+  const cache = new InMemoryCache({
+    typePolicies: {
+      Query: {},
+      Account: {
+        keyFields: false,
+        fields: {
+          balanceFormatted: {},
+        },
+      },
+      Node: {
+        keyFields: false,
+      },
+    },
+  });
+
+  const retryLink = new RetryLink({
+    delay: {
+      initial: 300,
+      max: 10000,
+      jitter: true,
+    },
+  });
+
+  const httpLink = new HttpLink({
+    uri: urlHTTP.href,
+    credentials: 'same-origin',
+  });
+
+  const errorLink = onError(({ graphQLErrors, networkError }) => {
+    console.log(graphQLErrors);
+    console.log(networkError);
+  });
+
+  return new ApolloClient({
+    connectToDevTools: process.env['NODE_ENV'] === 'development',
+    link: from([errorLink, retryLink, httpLink]),
+    cache,
+  });
+}
diff --git a/apps/trading/pages/_app.tsx b/apps/trading/pages/_app.tsx
index ce1bfde2e..90d072c8f 100644
--- a/apps/trading/pages/_app.tsx
+++ b/apps/trading/pages/_app.tsx
@@ -1,11 +1,15 @@
+import { ApolloProvider } from '@apollo/client';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
+import { useMemo } from 'react';
 import { Navbar } from '../components/navbar';
+import { createClient } from '../lib/apollo-client';
 import './styles.css';
 
 function VegaTradingApp({ Component, pageProps }: AppProps) {
+  const client = useMemo(() => createClient(process.env['NX_VEGA_URL']), []);
   return (
-    <>
+    <ApolloProvider client={client}>
       <Head>
         <title>Welcome to trading!</title>
       </Head>
@@ -13,7 +17,7 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
       <main className="px-8 py-12">
         <Component {...pageProps} />
       </main>
-    </>
+    </ApolloProvider>
   );
 }
 
diff --git a/apps/trading/pages/markets/__generated__/Markets.ts b/apps/trading/pages/markets/__generated__/Markets.ts
new file mode 100644
index 000000000..1b9efcdf5
--- /dev/null
+++ b/apps/trading/pages/markets/__generated__/Markets.ts
@@ -0,0 +1,23 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL query operation: Markets
+// ====================================================
+
+export interface Markets_markets {
+  __typename: "Market";
+  /**
+   * Market ID
+   */
+  id: string;
+}
+
+export interface Markets {
+  /**
+   * One or more instruments that are trading on the VEGA network
+   */
+  markets: Markets_markets[] | null;
+}
diff --git a/apps/trading/pages/markets/index.tsx b/apps/trading/pages/markets/index.tsx
index dbb465619..394dc4b2b 100644
--- a/apps/trading/pages/markets/index.tsx
+++ b/apps/trading/pages/markets/index.tsx
@@ -1,12 +1,42 @@
+import { gql, useQuery } from '@apollo/client';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { Markets } from './__generated__/Markets';
+
+const MARKETS_QUERY = gql`
+  query Markets {
+    markets {
+      id
+    }
+  }
+`;
 
 const Markets = () => {
   const router = useRouter();
+  const { data, loading, error } = useQuery<Markets>(MARKETS_QUERY);
+
+  if (loading || !data) {
+    return <div>Loading...</div>;
+  }
+
+  console.log(data);
+
   return (
     <div>
       <h1>Markets</h1>
-      <Link href={`${router.pathname}/ABC`}>View market ABC</Link>
+      {error ? (
+        <div>Could not load markets {error.message}</div>
+      ) : (
+        <ul>
+          {data.markets.map((m) => (
+            <li key={m.id}>
+              <Link href={`${router.pathname}/${m.id}`} passHref={true}>
+                <a>View market: {m.id}</a>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 };
diff --git a/apps/trading/project.json b/apps/trading/project.json
index 2e9f6071b..fc87faf48 100644
--- a/apps/trading/project.json
+++ b/apps/trading/project.json
@@ -48,6 +48,16 @@
       "options": {
         "lintFilePatterns": ["apps/trading/**/*.{ts,tsx,js,jsx}"]
       }
+    },
+    "generate": {
+      "builder": "@nrwl/workspace:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "npx apollo client:codegen --config=apps/trading/apollo.config.js --target=typescript --globalTypesFile=apps/trading/__generated__/globalTypes.ts"
+          }
+        ]
+      }
     }
   },
   "tags": []