├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── images
    │   ├── BTC.png
    │   └── ETH.png
    ├── manifest.json
    └── index.html
├── src
    ├── index.js
    ├── App.css
    └── App.js
├── package.json
├── deals.js
├── gateway.js
└── README.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kubowania/graphQL-federation-crypto/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kubowania/graphQL-federation-crypto/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kubowania/graphQL-federation-crypto/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/images/BTC.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kubowania/graphQL-federation-crypto/HEAD/public/images/BTC.png


--------------------------------------------------------------------------------
/public/images/ETH.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kubowania/graphQL-federation-crypto/HEAD/public/images/ETH.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import App from './App'
 4 | 
 5 | ReactDOM.render(
 6 |   <React.StrictMode>
 7 |     <App />
 8 |   </React.StrictMode>,
 9 |   document.getElementById('root')
10 | )


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   background-color: #dbdbdc;
 5 | }
 6 | 
 7 | .app {
 8 |   text-align: center;
 9 |   font-family: "Trebuchet MS", Arial;
10 | }
11 | 
12 | .overview {
13 |   background-color: #fff;
14 |   min-height: 200px;
15 |   width: 50vw;
16 |   margin: auto;
17 |   padding: 2%;
18 |   border-radius: 30px;
19 | }
20 | 
21 | table {
22 |   width: 100%;
23 | }
24 | 
25 | th {
26 |   padding: 2%;
27 | }
28 | 
29 | td {
30 |   padding: 5%;
31 | }
32 | 
33 | 
34 | img {
35 |   height: 30px;
36 |   width: 30px;
37 | }
38 | 
39 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "graphql-federation-crypto-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@apollo/federation": "^0.27.0",
 7 |     "@apollo/gateway": "^0.34.0",
 8 |     "apollo-server": "^3.0.2",
 9 |     "graphql": "^15.5.1",
10 |     "nodemon": "^2.0.12",
11 |     "react": "^17.0.2",
12 |     "react-dom": "^17.0.2",
13 |     "react-scripts": "4.0.3"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "start-gateway": "nodemon gateway.js",
19 |     "start-deals": "nodemon deals.js"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": [
23 |       "react-app",
24 |       "react-app/jest"
25 |     ]
26 |   },
27 |   "browserslist": {
28 |     "production": [
29 |       ">0.2%",
30 |       "not dead",
31 |       "not op_mini all"
32 |     ],
33 |     "development": [
34 |       "last 1 chrome version",
35 |       "last 1 firefox version",
36 |       "last 1 safari version"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/deals.js:
--------------------------------------------------------------------------------
 1 | const { ApolloServer, gql } = require("apollo-server")
 2 | const { buildFederatedSchema } = require("@apollo/federation")
 3 | 
 4 | const typeDefs = gql`
 5 |     
 6 |     extend type Coin @key(fields: "asset_id") {
 7 |     asset_id: String! @external
 8 |     }
 9 |     
10 |     type Deal {
11 |         id: Int!
12 |         volume: Int
13 |         timestamp: String
14 |         coin: Coin   
15 |     }
16 |     
17 |     extend type Query {
18 |         deal(id: Int) : Deal
19 |         deals: [Deal]
20 |     }
21 |    `
22 | 
23 |     const resolvers = {
24 |         Query: {
25 |             deal(_, args) {
26 |                 return deals.find(deal => deal.id == args.id)
27 |             },
28 |             deals() {
29 |                 return deals
30 |             }
31 |         }
32 |     }
33 | 
34 |     const server = new ApolloServer({
35 |         schema: buildFederatedSchema([
36 |             {
37 |                 typeDefs,
38 |                 resolvers
39 |             }
40 |         ])
41 |     })
42 | 
43 | server.listen({ port: 4001}).then(({ url}) => {
44 |     console.log(`Deals service ready at ${url}`)
45 | })
46 | 
47 | const deals = [
48 |     { id: 1, volume: 100, timestamp: "2021-07-26T22:53:49+00:00", coin: { asset_id: "BTC"}},
49 |     { id: 2, volume:300, timestamp: "2021-07-25T22:53:49+00:00", coin: { asset_id: "ETH"}},
50 | ]


--------------------------------------------------------------------------------
/gateway.js:
--------------------------------------------------------------------------------
 1 | const {ApolloServer} = require('apollo-server')
 2 | const {ApolloGateway, RemoteGraphQLDataSource} = require('@apollo/gateway')
 3 | require('dotenv').config()
 4 | 
 5 | const astraToken = process.env.REACT_APP_ASTRA_TOKEN
 6 | 
 7 | class StargateGraphQLDataSource extends RemoteGraphQLDataSource {
 8 |     willSendRequest({request, context}) {
 9 |         request.http.headers.set('x-cassandra-token', astraToken)
10 |     }
11 | }
12 | 
13 | const gateway = new ApolloGateway({
14 |         serviceList: [
15 |             {
16 |                 name: 'coins',
17 |                 url: 'https://1c671ec1-e2c9-4690-bc2f-8af68e897517-westeurope.apps.astra.datastax.com/api/graphql/coins'
18 |             },
19 |             {
20 |                 name: 'deals',
21 |                 url: 'http://localhost:4001/graphql'
22 |             }
23 |         ],
24 | 
25 |         introspectionHeaders: {
26 |             'x-cassandra-token': astraToken,
27 |         },
28 | 
29 |         buildService({name, url}) {
30 |             if (name == 'coins') {
31 |                 return new StargateGraphQLDataSource({url})
32 |             } else {
33 |                 return new RemoteGraphQLDataSource({url})
34 |             }
35 |         },
36 |         __exposeQueryPlanExperimental: true,
37 |     })
38 | 
39 | ;(async () => {
40 |     const server = new ApolloServer({
41 |         gateway,
42 |         engine: false,
43 |         subscriptions: false,
44 |     })
45 | 
46 |     server.listen().then(({url}) => {
47 |         console.log(`🚀 Gateway ready at ${url}`)
48 |     })
49 | })()
50 | 
51 | 
52 | 
53 | 
54 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css'
 2 | import { useState, useEffect } from 'react'
 3 | 
 4 | const App = () => {
 5 |     const [deals, setDeals ] = useState(null)
 6 | 
 7 |     const fetchData = async () => {
 8 |         const url = 'http://localhost:4000/'
 9 |         const query = `
10 |             query {
11 |               deals {
12 |                 id
13 |                 volume
14 |                 timestamp
15 |                 coin {
16 |                   asset_id
17 |                   category
18 |                   name
19 |                   price_usd
20 |                 }
21 |               }
22 |             }
23 |         `
24 | 
25 |         const response = await fetch(url, {
26 |             method: 'POST',
27 |             headers: {
28 |                 'Content-Type': 'application/json',
29 |                 'x-cassandra-token': process.env.REACT_APP_ASTRA_TOKEN
30 |             },
31 |             body: JSON.stringify({query})
32 |         })
33 | 
34 |         const responseBody = await response.json()
35 |         setDeals(responseBody.data.deals)
36 |     }
37 | 
38 |     useEffect(() => {
39 |         fetchData()
40 |     }, [])
41 | 
42 |     console.log(deals)
43 | 
44 |     const formatDate = (string) => {
45 |         return new Date(string).toDateString()
46 |     }
47 |     const formatPrice = (price) => {
48 |         return price.toFixed(2)
49 |     }
50 | 
51 |     const assignImage = (asset_id) => {
52 |         return `../images/${asset_id}.png`
53 |     }
54 | 
55 | 
56 |     return (
57 |         <>
58 |             {deals &&
59 |             <div className="app">
60 |                 <h1>My Crypto Dashboard</h1>
61 |                 <div className="overview">
62 |                     <table>
63 |                         <thead>
64 |                         <tr className="header">
65 |                             <th></th>
66 |                             <th>Asset ID</th>
67 |                             <th>Name</th>
68 |                             <th>Price</th>
69 |                             <th>Volume</th>
70 |                             <th>Gain/Loss</th>
71 |                             <th>Time</th>
72 |                         </tr>
73 |                         </thead>
74 |                         {deals.map((deal, index) => (
75 |                             <tbody key={index}>
76 |                             <tr>
77 |                                 <td>
78 |                                     <img
79 |                                         src={assignImage(deal.coin.asset_id)}
80 |                                         alt={`${deal.coin.asset_id} Logo`}
81 |                                     />
82 |                                 </td>
83 |                                 <td>{deal.coin.asset_id}</td>
84 |                                 <td>{deal.coin.name}</td>
85 |                                 <td>{`$${formatPrice(deal.coin.price_usd)}`}</td>
86 |                                 <td>{deal.volume}</td>
87 |                                 <td>{`$${formatPrice(deal.volume * deal.coin.price_usd)}`}</td>
88 |                                 <td>{formatDate(deal.timestamp)}</td>
89 |                         </tr>
90 |                         </tbody>))}
91 |                     </table>
92 |                 </div>
93 |             </div>}
94 |         </>
95 |     );
96 | }
97 | 
98 | export default App
99 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Getting Started
  2 | 
  3 | To start this project please first create a `.env` file in the root of your project with the following:
  4 | 
  5 | ```
  6 | REACT_APP_ASTRA_TOKEN={your_astra-token}
  7 | ```
  8 | 
  9 | In your Datastax Astra Dashboard, create a keyspace called 'coins'. Then navigate to your GraphQL playground and make sure you are at the endpoint ending with graphql-admin.
 10 | 
 11 | Eg: `https://5892dddf-ff9a-4b40-aa31-aa97de1a0966-westeurope.apps.astra.datastax.com/api/graphql-admin`
 12 | 
 13 | Once there, make sure to add the following to the HTTP Header to authorize access:
 14 | 
 15 | ```
 16 | {
 17 |   "x-cassandra-token": {your_astra-token}
 18 | }
 19 | ```
 20 | 
 21 | And deploy the following Schema:
 22 | 
 23 | ```
 24 | mutation {
 25 |   deploySchema(
 26 |     keyspace: "coins"
 27 |     schema: """
 28 |     type Coin @key @cql_input {
 29 |       asset_id: String! @cql_column(partitionKey: true)
 30 |       name: String
 31 |       category: String @cql_index
 32 |       price_usd: Float
 33 |     }
 34 |     type Mutation {
 35 |       insertCoin(coin: CoinInput): Coin
 36 |     }
 37 |     type Query {
 38 |       coinsByAssetIds(
 39 |         asset_ids: [String] @cql_where(field: "asset_id", predicate: IN)
 40 |       ): [Coin]
 41 |       coinsByCategory(
 42 |         category: String
 43 |       ): [Coin]
 44 |     }
 45 |     """
 46 |   ) {
 47 |     version
 48 |   }
 49 | }
 50 | ```
 51 | 
 52 | Next, go to the endpoint with your keyspace name:
 53 | 
 54 | Eg: `https://5892dddf-ff9a-4b40-aa31-aa97de1a0966-westeurope.apps.astra.datastax.com/api/graphql/coins`
 55 | 
 56 | And create some coins:
 57 | ```
 58 | mutation {
 59 |   c1: insertCoin(
 60 |     coin: {
 61 |       asset_id: "BTC"
 62 |       name: "Bitcoin"
 63 |       category: "Crypto"
 64 |       price_usd: 30724.60
 65 |     }
 66 |   ) {
 67 |     asset_id
 68 |   }
 69 |   c2: insertCoin(
 70 |     coin: {
 71 |       asset_id: "ETH"
 72 |       name: "Ethereum"
 73 |       category: "Crypto"
 74 |       price_usd: 1817.46
 75 |     }
 76 |   ) {
 77 |     asset_id
 78 |   }
 79 |     c3: insertCoin(
 80 |     coin: {
 81 |       asset_id: "GBP"
 82 |       name: "Great British Pounds"
 83 |       category: "Currency"
 84 |       price_usd: 1.37
 85 |     }
 86 |   ) {
 87 |     asset_id
 88 |   }
 89 | }
 90 | ```
 91 | 
 92 | 
 93 | To run this project please type the following commands:
 94 | 
 95 | ### `npm i`
 96 | 
 97 | This will install all the necessary dependencies.
 98 | 
 99 | ### `npm run start-deals`
100 | 
101 | This will start the Deals Service on [http://localhost:4001](http://localhost:4001) 
102 | 
103 | ### `npm run start-gateway` (in a new tab)
104 | 
105 | This will start the gateway with data from both the Deals Service and DataStax on [http://localhost:4000](http://localhost:4000) 
106 | 
107 | ### `npm run start` (in a new tab)
108 | 
109 | Runs the app in the development mode.\
110 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
111 | 
112 | The page will reload if you make edits.\
113 | You will also see any lint errors in the console.
114 | 
115 | To learn React, check out the [React documentation](https://reactjs.org/).
116 | 
117 | 
118 | ### MIT Licence
119 | 
120 | Copyright (c) 2020 Ania Kubow
121 | 
122 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
123 | 
124 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
125 | 
126 | *Translation: Ofcourse you can use this for you project! Just make sure to say where you got this from :)
127 | 
128 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
129 | 


--------------------------------------------------------------------------------