updated: passing graphql client to props of all components

client/src/Account.js

@@ -1,10 +1,8 @@
 import { useState, useEffect } from 'react'
-import { GraphQLClient, gql } from 'graphql-request';
-
-const client = new GraphQLClient(process.env.REACT_APP_API_URL || 'http://localhost:4000');
+import { gql } from 'graphql-request';
 
 export default function Account(props) {
-
+  const { client } = props;
   const [loading, setLoading] = useState(true)
   const [user, setUser] = useState({ firstName: '', lastName: '', phone: '', email: '' });
 

client/src/App.js

@@ -1,14 +1,21 @@
 import { BrowserRouter, Route, Switch } from "react-router-dom";
-
+import { GraphQLClient } from 'graphql-request';
 import Home from "./Home";
 import Account from "./Account";
 
+const token = localStorage.getItem('TOKEN');
+const client = new GraphQLClient(process.env.REACT_APP_API_URL || 'http://localhost:4000', {
+  headers: {
+    authorization: token ? `Bearer ${token}` : ''
+  }
+});
+
 export default function App() {
   return (
     <BrowserRouter>
       <Switch>
-        <Route exact path="/" component={Home} />
-        <Route exact path="/user/:token" component={Account} />
+        <Route exact path="/" render={() => <Home client={client} />} />
+        <Route exact path="/user/:token" render={(props) => <Account {...props} client={client} />} />
         <Route render={() => <h1>Not Found</h1>} />
       </Switch >
     </BrowserRouter>

client/src/Home.js

@@ -1,16 +1,9 @@
 
 import { useState } from 'react'
-import { GraphQLClient, gql } from 'graphql-request';
+import { gql } from 'graphql-request';
 import './index.css'
 
-const token = localStorage.getItem('TOKEN');
-const client = new GraphQLClient(process.env.REACT_APP_API_URL || 'http://localhost:4000', {
-  headers: {
-    authorization: token ? `Bearer ${token}` : ''
-  }
-});
-
-export default function Home() {
+export default function Home({ client }) {
   const [email, setEmail] = useState('');
   const [loading, setLoading] = useState(false);