Setup router, apollo client and graphql

Author: gauravchl

package-lock.json

@@ -3,14 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/react-hooks": "^3.1.2",
+    "apollo-boost": "^0.4.4",
     "apollo-server-lambda": "2.9.3",
     "encoding": "0.1.12",
-    "graphql": "14.5.4",
+    "graphql": "^14.5.4",
     "graphql-tag-pluck": "0.8.4",
     "merge-graphql-schemas": "1.7.0",
     "netlify-lambda": "1.6.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.1.1"
   },
   "scripts": {

package.json

@@ -1,14 +1,14 @@
-.App {
+.home {
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
+.home-logo {
+  animation: home-logo-spin infinite 20s linear;
   height: 40vmin;
   pointer-events: none;
 }
 
-.App-header {
+.home-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
@@ -19,11 +19,11 @@
   color: white;
 }
 
-.App-link {
+.home-link {
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
+@keyframes home-logo-spin {
   from {
     transform: rotate(0deg);
   }

src/App.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import logo from '../logo.svg';
+import './home.css';
+
+function Home(props) {
+
+  const { loading, error, data} = props;
+  console.log(props)
+  return (
+    <div className="home">
+      <header className="home-header">
+        <img src={logo} className="home-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="home-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+
+export default Home;

src/App.css renamed to src/components/home.css

@@ -0,0 +1,12 @@
+import React from "react";
+import Home from "../components/home.js";
+import { useQuery } from "@apollo/react-hooks";
+import { EXCHANGE_RATES } from "../queries/foo";
+
+function HomeContainer() {
+  const { loading, error, data } = useQuery(EXCHANGE_RATES);
+
+  return <Home loading={loading} error={error} data={data} />;
+}
+
+export default HomeContainer;

src/components/home.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import Routes from './router';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Routes />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/containers/home.js

@@ -0,0 +1,11 @@
+import { gql } from 'apollo-boost';
+
+
+export const EXCHANGE_RATES = gql`
+  {
+    rates(currency: "USD") {
+      currency
+      rate
+    }
+  }
+`;

src/index.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import HomeContainer from "./containers/home";
+import ApolloClient from "apollo-boost";
+import { ApolloProvider } from "@apollo/react-hooks";
+
+// TODO: Move uri value to config file
+const client = new ApolloClient({
+  uri: "https://48p1r2roz4.sse.codesandbox.io"
+});
+
+const Routes = () => {
+  return (
+    <div>
+      <ApolloProvider client={client}>
+        <Router>
+          <Switch>
+            <Route path="/">
+              <HomeContainer />
+            </Route>
+          </Switch>
+        </Router>
+      </ApolloProvider>
+    </div>
+  );
+};
+
+export default Routes;