From 63c1af97601aa2a268e775790e961bc4e0e04100 Mon Sep 17 00:00:00 2001 From: Matthew Russell 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 ( - <> + Welcome to trading! @@ -13,7 +17,7 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
- +
); } 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_QUERY); + + if (loading || !data) { + return
Loading...
; + } + + console.log(data); + return (

Markets

- View market ABC + {error ? ( +
Could not load markets {error.message}
+ ) : ( + + )}
); }; 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": []