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:https://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:https://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:https://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);