GraphQl setup done for Client Side

frontend/package.json

@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.8.10",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "flowbite-react": "^0.7.2",
+    "graphql": "^16.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.3",

frontend/src/App.jsx

@@ -12,7 +12,7 @@ function App() {
     <BrowserRouter>
         <Header></Header>
         <Routes>
-          <Route path='/' element={<Home></Home>}></Route>
+          <Route path='/' element={<Home/>}></Route>
           <Route path='/dashboard' element={<Dashboard></Dashboard>}></Route>
           <Route path='/quizes' element={<Quizes></Quizes>}></Route>
           <Route path='/discuss' element={<Discuss></Discuss>}></Route>

frontend/src/gqlOperatons/mutations.js

@@ -0,0 +1 @@
+//mutations for the frontend

frontend/src/gqlOperatons/queries.js

@@ -0,0 +1 @@
+//queries for Frontend to get data from backend

frontend/src/index.js

@@ -4,14 +4,31 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+import {
+  ApolloClient,
+  InMemoryCache,
+  ApolloProvider,
+} from "@apollo/client";
+
+const BaseUrl = "http://localhost:7000";
+
+// client for graphql
+const client = new ApolloClient({
+  uri: BaseUrl,
+  cache: new InMemoryCache(),
+  headers: {
+    authorization: localStorage.getItem('token') || '',
+  }
+});
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <ApolloProvider client={client}>
+      <App />
+    </ApolloProvider>
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+
 reportWebVitals();