LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

add apollo setup for trading app

Browse Source
This commit is contained in:
Matthew Russell 2022-02-28 15:43:36 -08:00
parent 6ae06b1a0d
commit 63c1af9760
7 changed files with 144 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/trading/__generated__/globalTypes.ts generated Normal file
View File

@ -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
//==============================================================

9
apps/trading/apollo.config.js Normal file
View File

@ -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}'],
},
};

53
apps/trading/lib/apollo-client.ts Normal file
View File

@ -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,
});
}

8
apps/trading/pages/_app.tsx
View File

@ -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>
);
}

23
apps/trading/pages/markets/__generated__/Markets.ts generated Normal file
View File

@ -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;
}

32
apps/trading/pages/markets/index.tsx
View File

@ -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>
);
};

10
apps/trading/project.json
View File

@ -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": []